Search
Copy Code
Previous: Pagination
Next: Dialog
Close Terminal
Light Mode
menubar-demo.tsx
menubar.tsx
Collapse
Reset
Copy Code
Download
Run
1
"use client"
2
3
import {
4
Menubar,
5
MenubarCheckboxItem,
6
MenubarContent,
7
MenubarItem,
8
MenubarMenu,
9
MenubarRadioGroup,
10
MenubarRadioItem,
11
MenubarSeparator,
12
MenubarShortcut,
13
MenubarSub,
14
MenubarSubContent,
15
MenubarSubTrigger,
16
MenubarTrigger,
17
MenubarLabel,
18
} from "@/components/ui/menubar"
19
20
export default function MenubarDemo() {
21
return (
22
<div className="w-full min-h-[400px] flex items-center justify-center p-8">
23
<Menubar>
24
<MenubarMenu>
25
<MenubarTrigger>File</MenubarTrigger>
26
<MenubarContent>
27
<MenubarLabel>Document</MenubarLabel>
28
<MenubarItem>
29
New tab <MenubarShortcut>⌘T</MenubarShortcut>
30
</MenubarItem>
31
<MenubarItem>
32
New window <MenubarShortcut>⌘N</MenubarShortcut>
33
</MenubarItem>
34
<MenubarItem disabled>New incognito window</MenubarItem>
35
<MenubarSeparator />
36
<MenubarSub>
37
<MenubarSubTrigger>Share</MenubarSubTrigger>
38
<MenubarSubContent>
39
<MenubarItem>Email link</MenubarItem>
40
<MenubarItem>Messages</MenubarItem>
41
<MenubarItem>Notes</MenubarItem>
42
<MenubarSeparator />
43
<MenubarItem>Copy link</MenubarItem>
44
</MenubarSubContent>
45
</MenubarSub>
46
<MenubarSeparator />
47
<MenubarItem>
48
Print... <MenubarShortcut>⌘P</MenubarShortcut>
49
</MenubarItem>
50
<MenubarItem className="text-red-500 focus:text-red-500 focus:bg-red-500/10 dark:text-red-400 dark:focus:text-red-400 dark:focus:bg-red-500/10">
51
Move to trash
52
</MenubarItem>
53
</MenubarContent>
54
</MenubarMenu>
55
56
<MenubarMenu>
57
<MenubarTrigger>Edit</MenubarTrigger>
58
<MenubarContent>
59
<MenubarItem>
60
Undo <MenubarShortcut>⌘Z</MenubarShortcut>
61
</MenubarItem>
62
<MenubarItem>
63
Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
64
</MenubarItem>
65
<MenubarSeparator />
66
<MenubarSub>
67
<MenubarSubTrigger>Find</MenubarSubTrigger>
68
<MenubarSubContent>
69
<MenubarItem>Search the web</MenubarItem>
70
<MenubarSeparator />
71
<MenubarItem>Find... <MenubarShortcut>⌘F</MenubarShortcut></MenubarItem>
72
<MenubarItem>Find next</MenubarItem>
73
<MenubarItem>Find previous</MenubarItem>
74
</MenubarSubContent>
75
</MenubarSub>
76
<MenubarSeparator />
77
<MenubarItem>
78
Cut <MenubarShortcut>⌘X</MenubarShortcut>
79
</MenubarItem>
80
<MenubarItem>
81
Copy <MenubarShortcut>⌘C</MenubarShortcut>
82
</MenubarItem>
83
<MenubarItem>
84
Paste <MenubarShortcut>⌘V</MenubarShortcut>
85
</MenubarItem>
86
</MenubarContent>
87
</MenubarMenu>
88
89
<MenubarMenu>
90
<MenubarTrigger>View</MenubarTrigger>
91
<MenubarContent>
92
<MenubarCheckboxItem>Bookmarks bar</MenubarCheckboxItem>
93
<MenubarCheckboxItem checked>Full URLs</MenubarCheckboxItem>
94
<MenubarSeparator />
95
<MenubarItem>
96
Reload <MenubarShortcut>⌘R</MenubarShortcut>
97
</MenubarItem>
98
<MenubarItem disabled>
99
Force reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
100
</MenubarItem>
101
<MenubarItem>Toggle fullscreen</MenubarItem>
102
<MenubarSeparator />
103
<MenubarLabel>Zoom</MenubarLabel>
104
<MenubarRadioGroup value="100%">
105
<MenubarRadioItem value="75%">75%</MenubarRadioItem>
106
<MenubarRadioItem value="100%">100%</MenubarRadioItem>
107
<MenubarRadioItem value="125%">125%</MenubarRadioItem>
108
</MenubarRadioGroup>
109
</MenubarContent>
110
</MenubarMenu>
111
112
<MenubarMenu>
113
<MenubarTrigger>Profiles</MenubarTrigger>
114
<MenubarContent>
115
<MenubarRadioGroup value="benoit">
116
<MenubarRadioItem value="andy">Andy</MenubarRadioItem>
117
<MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
118
<MenubarRadioItem value="luis">Luis</MenubarRadioItem>
119
</MenubarRadioGroup>
120
<MenubarSeparator />
121
<MenubarItem>Edit...</MenubarItem>
122
<MenubarItem>Add profile...</MenubarItem>
123
</MenubarContent>
124
</MenubarMenu>
125
126
<MenubarMenu>
127
<MenubarTrigger>Help</MenubarTrigger>
128
<MenubarContent>
129
<MenubarItem>Help Center</MenubarItem>
130
<MenubarItem>Search Issues</MenubarItem>
131
<MenubarSeparator />
132
<MenubarItem>About</MenubarItem>
133
</MenubarContent>
134
</MenubarMenu>
135
</Menubar>
136
</div>
137
)
138
}