Menubar
A menu with dropdowns for navigating actions and sections.
@radix-ui/react-menubar
lucide-react1import {
2 Menubar,
3 MenubarCheckboxItem,
4 MenubarContent,
5 MenubarItem,
6 MenubarMenu,
7 MenubarRadioGroup,
8 MenubarRadioItem,
9 MenubarSeparator,
10 MenubarShortcut,
11 MenubarSub,
12 MenubarSubContent,
13 MenubarSubTrigger,
14 MenubarTrigger,
15} from '@/components/ui/menubar'
16
17export function MenubarDemo() {
18 return (
19 <Menubar>
20 <MenubarMenu>
21 <MenubarTrigger>File</MenubarTrigger>
22 <MenubarContent>
23 <MenubarItem>
24 New Tab <MenubarShortcut>⌘T</MenubarShortcut>
25 </MenubarItem>
26 <MenubarItem>
27 New Window <MenubarShortcut>⌘N</MenubarShortcut>
28 </MenubarItem>
29 <MenubarItem disabled>New Incognito Window</MenubarItem>
30 <MenubarSeparator />
31 <MenubarSub>
32 <MenubarSubTrigger>Share</MenubarSubTrigger>
33 <MenubarSubContent>
34 <MenubarItem>Email link</MenubarItem>
35 <MenubarItem>Messages</MenubarItem>
36 <MenubarItem>Notes</MenubarItem>
37 </MenubarSubContent>
38 </MenubarSub>
39 <MenubarSeparator />
40 <MenubarItem>
41 Print... <MenubarShortcut>⌘P</MenubarShortcut>
42 </MenubarItem>
43 </MenubarContent>
44 </MenubarMenu>
45 <MenubarMenu>
46 <MenubarTrigger>Edit</MenubarTrigger>
47 <MenubarContent>
48 <MenubarItem>
49 Undo <MenubarShortcut>⌘Z</MenubarShortcut>
50 </MenubarItem>
51 <MenubarItem>
52 Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
53 </MenubarItem>
54 <MenubarSeparator />
55 <MenubarSub>
56 <MenubarSubTrigger>Find</MenubarSubTrigger>
57 <MenubarSubContent>
58 <MenubarItem>Search the web</MenubarItem>
59 <MenubarSeparator />
60 <MenubarItem>Find...</MenubarItem>
61 <MenubarItem>Find Next</MenubarItem>
62 <MenubarItem>Find Previous</MenubarItem>
63 </MenubarSubContent>
64 </MenubarSub>
65 <MenubarSeparator />
66 <MenubarItem>Cut</MenubarItem>
67 <MenubarItem>Copy</MenubarItem>
68 <MenubarItem>Paste</MenubarItem>
69 </MenubarContent>
70 </MenubarMenu>
71 <MenubarMenu>
72 <MenubarTrigger>View</MenubarTrigger>
73 <MenubarContent>
74 <MenubarCheckboxItem>
75 Always Show Bookmarks Bar
76 </MenubarCheckboxItem>
77 <MenubarCheckboxItem checked>
78 Always Show Full URLs
79 </MenubarCheckboxItem>
80 <MenubarSeparator />
81 <MenubarItem inset>
82 Reload <MenubarShortcut>⌘R</MenubarShortcut>
83 </MenubarItem>
84 <MenubarItem disabled inset>
85 Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
86 </MenubarItem>
87 <MenubarSeparator />
88 <MenubarItem inset>Toggle Fullscreen</MenubarItem>
89 <MenubarSeparator />
90 <MenubarItem inset>Hide Sidebar</MenubarItem>
91 </MenubarContent>
92 </MenubarMenu>
93 <MenubarMenu>
94 <MenubarTrigger>Profiles</MenubarTrigger>
95 <MenubarContent>
96 <MenubarRadioGroup value="benoit">
97 <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
98 <MenubarRadioItem value="benoit">
99 Benoit
100 </MenubarRadioItem>
101 <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
102 </MenubarRadioGroup>
103 <MenubarSeparator />
104 <MenubarItem inset>Edit...</MenubarItem>
105 <MenubarSeparator />
106 <MenubarItem inset>Add Profile...</MenubarItem>
107 </MenubarContent>
108 </MenubarMenu>
109 </Menubar>
110 )
111}
112Installation
1
Install the following dependencies:
npx shadcn@latest add https://sbthemes.com/r/menubar.json
Examples
Position
1import {
2 Menubar,
3 MenubarCheckboxItem,
4 MenubarContent,
5 MenubarItem,
6 MenubarMenu,
7 MenubarRadioGroup,
8 MenubarRadioItem,
9 MenubarSeparator,
10 MenubarShortcut,
11 MenubarSub,
12 MenubarSubContent,
13 MenubarSubTrigger,
14 MenubarTrigger,
15} from '@/components/ui/menubar'
16
17export function MenubarPositionsDemo() {
18 return (
19 <Menubar className="w-full">
20 <MenubarMenu>
21 <MenubarTrigger>Project</MenubarTrigger>
22 <MenubarContent side="right">
23 <MenubarItem>
24 Create Project <MenubarShortcut>⌘N</MenubarShortcut>
25 </MenubarItem>
26 <MenubarItem>
27 Open Project <MenubarShortcut>⌘O</MenubarShortcut>
28 </MenubarItem>
29 <MenubarSeparator />
30 <MenubarSub>
31 <MenubarSubTrigger>Recent Projects</MenubarSubTrigger>
32 <MenubarSubContent>
33 <MenubarItem>Dashboard UI</MenubarItem>
34 <MenubarItem>Video Editor</MenubarItem>
35 <MenubarItem>Inventory System</MenubarItem>
36 </MenubarSubContent>
37 </MenubarSub>
38 <MenubarSeparator />
39 <MenubarItem>
40 Save <MenubarShortcut>⌘S</MenubarShortcut>
41 </MenubarItem>
42 <MenubarItem>
43 Save As... <MenubarShortcut>⇧⌘S</MenubarShortcut>
44 </MenubarItem>
45 </MenubarContent>
46 </MenubarMenu>
47
48 <MenubarMenu>
49 <MenubarTrigger>Tools</MenubarTrigger>
50 <MenubarContent side="left">
51 <MenubarItem>Command Palette</MenubarItem>
52 <MenubarItem>Extensions</MenubarItem>
53 <MenubarSeparator />
54 <MenubarSub>
55 <MenubarSubTrigger>Generators</MenubarSubTrigger>
56 <MenubarSubContent>
57 <MenubarItem>Component Template</MenubarItem>
58 <MenubarItem>API Route</MenubarItem>
59 <MenubarItem>Database Model</MenubarItem>
60 </MenubarSubContent>
61 </MenubarSub>
62 <MenubarSeparator />
63 <MenubarItem>Run Formatter</MenubarItem>
64 </MenubarContent>
65 </MenubarMenu>
66
67 <MenubarMenu>
68 <MenubarTrigger>Window</MenubarTrigger>
69 <MenubarContent side="top">
70 <MenubarCheckboxItem>Show Status Bar</MenubarCheckboxItem>
71 <MenubarCheckboxItem checked>
72 Show Sidebar
73 </MenubarCheckboxItem>
74 <MenubarSeparator />
75 <MenubarItem inset>Zoom In</MenubarItem>
76 <MenubarItem inset>Zoom Out</MenubarItem>
77 <MenubarSeparator />
78 <MenubarItem inset>Reset Layout</MenubarItem>
79 </MenubarContent>
80 </MenubarMenu>
81
82 <MenubarMenu>
83 <MenubarTrigger>Account</MenubarTrigger>
84 <MenubarContent side="bottom">
85 <MenubarRadioGroup value="user1">
86 <MenubarRadioItem value="user1">
87 Rafael Costa
88 </MenubarRadioItem>
89 <MenubarRadioItem value="user2">
90 Evelyn
91 </MenubarRadioItem>
92 <MenubarRadioItem value="user3">
93 William
94 </MenubarRadioItem>
95 </MenubarRadioGroup>
96 <MenubarSeparator />
97 <MenubarItem inset>Manage Account</MenubarItem>
98 <MenubarSeparator />
99 <MenubarItem inset>Logout</MenubarItem>
100 </MenubarContent>
101 </MenubarMenu>
102 </Menubar>
103 )
104}
105Align
1import {
2 Menubar,
3 MenubarCheckboxItem,
4 MenubarContent,
5 MenubarItem,
6 MenubarMenu,
7 MenubarRadioGroup,
8 MenubarRadioItem,
9 MenubarSeparator,
10 MenubarShortcut,
11 MenubarSub,
12 MenubarSubContent,
13 MenubarSubTrigger,
14 MenubarTrigger,
15} from '@/components/ui/menubar'
16
17export function MenubarDemo() {
18 return (
19 <Menubar>
20 <MenubarMenu>
21 <MenubarTrigger>Analytics</MenubarTrigger>
22 <MenubarContent align="start">
23 <MenubarItem>Overview</MenubarItem>
24 <MenubarItem>Real-Time</MenubarItem>
25 <MenubarItem>Audience</MenubarItem>
26 <MenubarSeparator />
27 <MenubarSub>
28 <MenubarSubTrigger>Traffic Sources</MenubarSubTrigger>
29 <MenubarSubContent>
30 <MenubarItem>Search</MenubarItem>
31 <MenubarItem>Social</MenubarItem>
32 <MenubarItem>Direct</MenubarItem>
33 </MenubarSubContent>
34 </MenubarSub>
35 </MenubarContent>
36 </MenubarMenu>
37
38 <MenubarMenu>
39 <MenubarTrigger>Settings</MenubarTrigger>
40 <MenubarContent align="center">
41 <MenubarRadioGroup value="light">
42 <MenubarRadioItem value="light">
43 Light Theme
44 </MenubarRadioItem>
45 <MenubarRadioItem value="dark">
46 Dark Theme
47 </MenubarRadioItem>
48 <MenubarRadioItem value="system">
49 System Theme
50 </MenubarRadioItem>
51 </MenubarRadioGroup>
52 <MenubarSeparator />
53 <MenubarCheckboxItem defaultChecked>
54 Enable Comments
55 </MenubarCheckboxItem>
56 <MenubarCheckboxItem>
57 Email Notifications
58 </MenubarCheckboxItem>
59 <MenubarSeparator />
60 <MenubarItem>API Keys</MenubarItem>
61 <MenubarItem>Webhooks</MenubarItem>
62 </MenubarContent>
63 </MenubarMenu>
64
65 <MenubarMenu>
66 <MenubarTrigger>Account</MenubarTrigger>
67 <MenubarContent align="end">
68 <MenubarItem>Profile</MenubarItem>
69 <MenubarItem>Billing</MenubarItem>
70 <MenubarItem>Team Members</MenubarItem>
71 <MenubarSeparator />
72 <MenubarItem>Logout</MenubarItem>
73 </MenubarContent>
74 </MenubarMenu>
75 </Menubar>
76 )
77}
78API Reference
MenubarContent
| Prop | Type | Default |
|---|---|---|
| align | start,end,center | start |
| side | top,left,right,bottom | bottom |
| alignOffset | number | -4 |
| sideOffset | number | 8 |
MenubarCheckboxItem
| Prop | Type | Default |
|---|---|---|
| checked | boolean | - |
On This Page