Sidebar
Access sidebar state and controls.
Default
Usage
tsx
import { Sidebar, useSidebar, SidebarProvider, SidebarTrigger, SidebarRail, SidebarInset, SidebarInput, SidebarHeader, SidebarFooter, SidebarSeparator, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarGroupAction, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuAction, SidebarMenuBadge, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton } from '@tryvienna/ui'
<SidebarProvider>
<Sidebar>
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg">
<div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded">
V
</div>
<span className="font-semibold">Vienna</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
<SidebarInput placeholder="Search..." />
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton isActive tooltip="Home">
<HomeIcon />
<span>Home</span>
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton tooltip="Inbox">
<InboxIcon />
<span>Inbox</span>
</SidebarMenuButton>
<SidebarMenuBadge>12</SidebarMenuBadge>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton tooltip="Calendar">
<CalendarIcon />
<span>Calendar</span>
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton tooltip="Search">
<SearchIcon />
<span>Search</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
<SidebarSeparator />
<SidebarGroup>
<SidebarGroupLabel>Projects</SidebarGroupLabel>
<SidebarGroupAction title="Add Project">
<PlusIcon />
</SidebarGroupAction>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton>
<StarIcon />
<span>Design System</span>
</SidebarMenuButton>
<SidebarMenuSub>
<SidebarMenuSubItem>
<SidebarMenuSubButton isActive>
<span>Components</span>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
<SidebarMenuSubItem>
<SidebarMenuSubButton>
<span>Tokens</span>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
</SidebarMenuSub>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton>
<MailIcon />
<span>Marketing</span>
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton>
<FileIcon />
<span>Documentation</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton tooltip="Settings">
<SettingsIcon />
<span>Settings</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
<SidebarRail />
</Sidebar>
<SidebarInset>
<header className="flex h-12 items-center gap-2 border-b px-4">
<SidebarTrigger />
<span className="text-sm font-medium">Dashboard</span>
</header>
<div className="flex flex-1 items-center justify-center p-8">
<p className="text-muted-foreground text-sm">
Main content area. Toggle sidebar with the button or Cmd+B.
</p>
</div>
</SidebarInset>
</SidebarProvider>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
Examples
Default
Default
tsx
<SidebarProvider>
<Sidebar>
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg">
<div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded">
V
</div>
<span className="font-semibold">Vienna</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
<SidebarInput placeholder="Search..." />
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton isActive tooltip="Home">
<HomeIcon />
<span>Home</span>
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton tooltip="Inbox">
<InboxIcon />
<span>Inbox</span>
</SidebarMenuButton>
<SidebarMenuBadge>12</SidebarMenuBadge>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton tooltip="Calendar">
<CalendarIcon />
<span>Calendar</span>
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton tooltip="Search">
<SearchIcon />
<span>Search</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
<SidebarSeparator />
<SidebarGroup>
<SidebarGroupLabel>Projects</SidebarGroupLabel>
<SidebarGroupAction title="Add Project">
<PlusIcon />
</SidebarGroupAction>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton>
<StarIcon />
<span>Design System</span>
</SidebarMenuButton>
<SidebarMenuSub>
<SidebarMenuSubItem>
<SidebarMenuSubButton isActive>
<span>Components</span>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
<SidebarMenuSubItem>
<SidebarMenuSubButton>
<span>Tokens</span>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
</SidebarMenuSub>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton>
<MailIcon />
<span>Marketing</span>
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton>
<FileIcon />
<span>Documentation</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton tooltip="Settings">
<SettingsIcon />
<span>Settings</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
<SidebarRail />
</Sidebar>
<SidebarInset>
<header className="flex h-12 items-center gap-2 border-b px-4">
<SidebarTrigger />
<span className="text-sm font-medium">Dashboard</span>
</header>
<div className="flex flex-1 items-center justify-center p-8">
<p className="text-muted-foreground text-sm">
Main content area. Toggle sidebar with the button or Cmd+B.
</p>
</div>
</SidebarInset>
</SidebarProvider>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
Icon Collapse
Icon Collapse
tsx
<SidebarProvider defaultOpen={false}>
<Sidebar collapsible="icon">
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg" tooltip="Vienna">
<div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded">
V
</div>
<span className="font-semibold">Vienna</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Menu</SidebarGroupLabel>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton isActive tooltip="Home">
<HomeIcon />
<span>Home</span>
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton tooltip="Inbox">
<InboxIcon />
<span>Inbox</span>
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton tooltip="Calendar">
<CalendarIcon />
<span>Calendar</span>
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton tooltip="Settings">
<SettingsIcon />
<span>Settings</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SidebarInset>
<header className="flex h-12 items-center gap-2 border-b px-4">
<SidebarTrigger />
<span className="text-sm font-medium">Icon Collapse Mode</span>
</header>
<div className="flex flex-1 items-center justify-center p-8">
<p className="text-muted-foreground text-sm">
Sidebar collapses to icons only. Hover items for tooltips.
</p>
</div>
</SidebarInset>
</SidebarProvider>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
Floating
Floating
tsx
<SidebarProvider>
<Sidebar variant="floating">
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg">
<div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded">
V
</div>
<span className="font-semibold">Vienna</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Menu</SidebarGroupLabel>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton isActive>
<HomeIcon />
<span>Home</span>
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton>
<InboxIcon />
<span>Inbox</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SidebarInset>
<header className="flex h-12 items-center gap-2 border-b px-4">
<SidebarTrigger />
<span className="text-sm font-medium">Floating Variant</span>
</header>
<div className="flex flex-1 items-center justify-center p-8">
<p className="text-muted-foreground text-sm">
Sidebar floats with rounded corners and shadow.
</p>
</div>
</SidebarInset>
</SidebarProvider>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
Loading
Loading
tsx
<SidebarProvider>
<Sidebar>
<SidebarHeader>
<SidebarMenuSkeleton showIcon />
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Loading...</SidebarGroupLabel>
<SidebarMenu>
{Array.from({ length: 5 }).map((_, i) => (
<SidebarMenuItem key={i}>
<SidebarMenuSkeleton showIcon />
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SidebarInset>
<header className="flex h-12 items-center gap-2 border-b px-4">
<SidebarTrigger />
<span className="text-sm font-medium">Loading State</span>
</header>
<div className="flex flex-1 items-center justify-center p-8">
<p className="text-muted-foreground text-sm">Sidebar showing loading skeletons.</p>
</div>
</SidebarInset>
</SidebarProvider>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Variants
| Name | Options | Default |
|---|---|---|
variant | default | outline | default |
size | default | sm | lg | default |
API Reference
Sidebar
| Prop | Type | Default | Description |
|---|---|---|---|
side | "left" | "right" | left | |
variant | "inset" | "sidebar" | "floating" | sidebar | |
collapsible | "icon" | "none" | "offcanvas" | offcanvas |
Also accepts all props from div.
useSidebar
useSidebar — Access sidebar state and controls.
SidebarProvider
SidebarProvider — Root provider for the sidebar system.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultOpen | boolean | true | |
openProp | boolean | undefined | - | |
setOpenProp | ((open: boolean) => void) | undefined | - | |
compactBreakpoint | number | 768 | |
style | React.CSSProperties | undefined | - |
Also accepts all props from div.
SidebarTrigger
SidebarTrigger — Button that toggles the sidebar open/closed.
| Prop | Type | Default | Description |
|---|---|---|---|
onClick | React.MouseEventHandler<HTMLButtonElement> | undefined | - |
Also accepts all props from Button.
SidebarRail
SidebarRail — Thin rail at the sidebar edge for click-to-toggle.
Also accepts all props from button.
SidebarInset
SidebarInset — Main content area that sits beside the sidebar.
Also accepts all props from main.
SidebarInput
SidebarInput — Search/filter input styled for the sidebar.
Also accepts all props from Input.
SidebarHeader
SidebarHeader — Top section of the sidebar.
Also accepts all props from div.
SidebarFooter
SidebarFooter — Bottom section of the sidebar.
Also accepts all props from div.
SidebarSeparator
SidebarSeparator — Horizontal rule within the sidebar.
Also accepts all props from Separator.
SidebarContent
SidebarContent — Scrollable content area of the sidebar.
Also accepts all props from div.
SidebarGroup
SidebarGroup — Logical grouping within sidebar content.
Also accepts all props from div.
SidebarGroupLabel
SidebarGroupLabel — Label/heading for a sidebar group.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false |
Also accepts all props from div.
SidebarGroupAction
SidebarGroupAction — Action button in a sidebar group header.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false |
Also accepts all props from button.
SidebarGroupContent
SidebarGroupContent — Content container within a sidebar group.
Also accepts all props from div.
SidebarMenu
SidebarMenu — List container for sidebar menu items. Renders as <ul>.
Also accepts all props from ul.
SidebarMenuItem
SidebarMenuItem — Individual menu item container. Renders as <li>.
Also accepts all props from li.
SidebarMenuButton
SidebarMenuButton — Interactive button within a sidebar menu item.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | |
isActive | boolean | false | |
variant | "default" | "outline" | null | default | |
size | "default" | "sm" | "lg" | null | default | |
tooltip | string | (TooltipContentProps & React.RefAttributes<HTMLDivElement>) | undefined | - |
Also accepts all props from TooltipContent.
SidebarMenuAction
SidebarMenuAction — Secondary action button within a menu item.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | |
showOnHover | boolean | false |
Also accepts all props from button.
SidebarMenuBadge
SidebarMenuBadge — Badge/count indicator within a menu item.
Also accepts all props from div.
SidebarMenuSkeleton
SidebarMenuSkeleton — Loading skeleton for a menu item.
| Prop | Type | Default | Description |
|---|---|---|---|
showIcon | boolean | false |
Also accepts all props from div.
SidebarMenuSub
SidebarMenuSub — Nested submenu list with left border.
Also accepts all props from ul.
SidebarMenuSubItem
SidebarMenuSubItem — Item within a SidebarMenuSub. Renders as <li>.
Also accepts all props from li.
SidebarMenuSubButton
SidebarMenuSubButton — Interactive button within a submenu item.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | |
size | "sm" | "md" | md | |
isActive | boolean | false |
Also accepts all props from a.
Data Attributes
| Component | data-slot |
|---|---|
Sidebar | "sidebar-wrapper" |
useSidebar | "use-sidebar" |
SidebarProvider | "sidebar-wrapper" |
SidebarTrigger | "sidebar-trigger" |
SidebarRail | "sidebar-rail" |
SidebarInset | "sidebar-inset" |
SidebarInput | "sidebar-input" |
SidebarHeader | "sidebar-header" |
SidebarFooter | "sidebar-footer" |
SidebarSeparator | "sidebar-separator" |
SidebarContent | "sidebar-content" |
SidebarGroup | "sidebar-group" |
SidebarGroupLabel | "sidebar-group-label" |
SidebarGroupAction | "sidebar-group-action" |
SidebarGroupContent | "sidebar-group-content" |
SidebarMenu | "sidebar-menu" |
SidebarMenuItem | "sidebar-menu-item" |
SidebarMenuButton | "sidebar-menu-button" |
SidebarMenuAction | "sidebar-menu-action" |
SidebarMenuBadge | "sidebar-menu-badge" |
SidebarMenuSkeleton | "sidebar-menu-skeleton" |
SidebarMenuSub | "sidebar-menu-sub" |
SidebarMenuSubItem | "sidebar-menu-sub-item" |
SidebarMenuSubButton | "sidebar-menu-sub-button" |