Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

1
import {
2
  Menubar,
3
  MenubarCheckboxItem,
4
  MenubarContent,
5
  MenubarGroup,
6
  MenubarItem,
7
  MenubarMenu,
8
  MenubarRadioGroup,
9
  MenubarRadioItem,
10
  MenubarSeparator,
11
  MenubarShortcut,
12
  MenubarSub,
13
  MenubarSubContent,
14
  MenubarSubTrigger,
15
  MenubarTrigger,
16
} from "@/components/ui/pxl/menubar";
17

18
export default function MenubarDemo() {
19
  return (
20
    <Menubar className="w-72">
21
      <MenubarMenu>
22
        <MenubarTrigger>File</MenubarTrigger>
23
        <MenubarContent>
24
          <MenubarGroup>
25
            <MenubarItem>
26
              New Tab <MenubarShortcut>⌘T</MenubarShortcut>
27
            </MenubarItem>
28
            <MenubarItem>
29
              New Window <MenubarShortcut>⌘N</MenubarShortcut>
30
            </MenubarItem>
31
            <MenubarItem disabled>New Incognito Window</MenubarItem>
32
          </MenubarGroup>
33
          <MenubarSeparator />
34
          <MenubarGroup>
35
            <MenubarSub>
36
              <MenubarSubTrigger>Share</MenubarSubTrigger>
37
              <MenubarSubContent>
38
                <MenubarGroup>
39
                  <MenubarItem>Email link</MenubarItem>
40
                  <MenubarItem>Messages</MenubarItem>
41
                  <MenubarItem>Notes</MenubarItem>
42
                </MenubarGroup>
43
              </MenubarSubContent>
44
            </MenubarSub>
45
          </MenubarGroup>
46
          <MenubarSeparator />
47
          <MenubarGroup>
48
            <MenubarItem>
49
              Print... <MenubarShortcut>⌘P</MenubarShortcut>
50
            </MenubarItem>
51
          </MenubarGroup>
52
        </MenubarContent>
53
      </MenubarMenu>
54
      <MenubarMenu>
55
        <MenubarTrigger>Edit</MenubarTrigger>
56
        <MenubarContent>
57
          <MenubarGroup>
58
            <MenubarItem>
59
              Undo <MenubarShortcut>⌘Z</MenubarShortcut>
60
            </MenubarItem>
61
            <MenubarItem>
62
              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
63
            </MenubarItem>
64
          </MenubarGroup>
65
          <MenubarSeparator />
66
          <MenubarGroup>
67
            <MenubarSub>
68
              <MenubarSubTrigger>Find</MenubarSubTrigger>
69
              <MenubarSubContent>
70
                <MenubarGroup>
71
                  <MenubarItem>Search the web</MenubarItem>
72
                </MenubarGroup>
73
                <MenubarSeparator />
74
                <MenubarGroup>
75
                  <MenubarItem>Find...</MenubarItem>
76
                  <MenubarItem>Find Next</MenubarItem>
77
                  <MenubarItem>Find Previous</MenubarItem>
78
                </MenubarGroup>
79
              </MenubarSubContent>
80
            </MenubarSub>
81
          </MenubarGroup>
82
          <MenubarSeparator />
83
          <MenubarGroup>
84
            <MenubarItem>Cut</MenubarItem>
85
            <MenubarItem>Copy</MenubarItem>
86
            <MenubarItem>Paste</MenubarItem>
87
          </MenubarGroup>
88
        </MenubarContent>
89
      </MenubarMenu>
90
      <MenubarMenu>
91
        <MenubarTrigger>View</MenubarTrigger>
92
        <MenubarContent className="w-44">
93
          <MenubarGroup>
94
            <MenubarCheckboxItem>Bookmarks Bar</MenubarCheckboxItem>
95
            <MenubarCheckboxItem checked>Full URLs</MenubarCheckboxItem>
96
          </MenubarGroup>
97
          <MenubarSeparator />
98
          <MenubarGroup>
99
            <MenubarItem inset>
100
              Reload <MenubarShortcut>R</MenubarShortcut>
101
            </MenubarItem>
102
            <MenubarItem disabled inset>
103
              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
104
            </MenubarItem>
105
          </MenubarGroup>
106
          <MenubarSeparator />
107
          <MenubarGroup>
108
            <MenubarItem inset>Toggle Fullscreen</MenubarItem>
109
          </MenubarGroup>
110
          <MenubarSeparator />
111
          <MenubarGroup>
112
            <MenubarItem inset>Hide Sidebar</MenubarItem>
113
          </MenubarGroup>
114
        </MenubarContent>
115
      </MenubarMenu>
116
      <MenubarMenu>
117
        <MenubarTrigger>Profiles</MenubarTrigger>
118
        <MenubarContent>
119
          <MenubarRadioGroup value="benoit">
120
            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
121
            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
122
            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
123
          </MenubarRadioGroup>
124
          <MenubarSeparator />
125
          <MenubarGroup>
126
            <MenubarItem inset>Edit...</MenubarItem>
127
          </MenubarGroup>
128
          <MenubarSeparator />
129
          <MenubarGroup>
130
            <MenubarItem inset>Add Profile...</MenubarItem>
131
          </MenubarGroup>
132
        </MenubarContent>
133
      </MenubarMenu>
134
    </Menubar>
135
  );
136
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/menubar

Copy and paste the following code into your project.

1
"use client";
2

3
import { Menu as MenuPrimitive } from "@base-ui/react/menu";
4
import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
5
import type { ComponentProps } from "react";
6

7
import {
8
  DropdownMenu,
9
  DropdownMenuContent,
10
  DropdownMenuGroup,
11
  DropdownMenuItem,
12
  DropdownMenuLabel,
13
  DropdownMenuPortal,
14
  DropdownMenuRadioGroup,
15
  DropdownMenuSeparator,
16
  DropdownMenuShortcut,
17
  DropdownMenuSub,
18
  DropdownMenuSubContent,
19
  DropdownMenuSubTrigger,
20
  DropdownMenuTrigger,
21
} from "@/components/ui/pxl/dropdown-menu";
22
import { cn } from "@/lib/utils";
23

24
function Menubar({ className, ...props }: MenubarPrimitive.Props) {
25
  return (
26
    <MenubarPrimitive
27
      data-slot="menubar"
28
      className={cn(
29
        "flex h-8 items-center gap-0.5 pixel-border pixel-size-md pixel-color-border p-1.25",
30
        className,
31
      )}
32
      {...props}
33
    />
34
  );
35
}
36

37
function MenubarMenu({ ...props }: ComponentProps<typeof DropdownMenu>) {
38
  return <DropdownMenu data-slot="menubar-menu" {...props} />;
39
}
40

41
function MenubarGroup({ ...props }: ComponentProps<typeof DropdownMenuGroup>) {
42
  return <DropdownMenuGroup data-slot="menubar-group" {...props} />;
43
}
44

45
function MenubarPortal({
46
  ...props
47
}: ComponentProps<typeof DropdownMenuPortal>) {
48
  return <DropdownMenuPortal data-slot="menubar-portal" {...props} />;
49
}
50

51
function MenubarTrigger({
52
  className,
53
  ...props
54
}: ComponentProps<typeof DropdownMenuTrigger>) {
55
  return (
56
    <DropdownMenuTrigger
57
      data-slot="menubar-trigger"
58
      className={cn(
59
        "flex items-center pixel-rounded pixel-size-md px-1.5 py-0.5 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
60
        className,
61
      )}
62
      {...props}
63
    />
64
  );
65
}
66

67
function MenubarContent({
68
  className,
69
  align = "start",
70
  alignOffset = -4,
71
  sideOffset = 8,
72
  ...props
73
}: ComponentProps<typeof DropdownMenuContent>) {
74
  return (
75
    <DropdownMenuContent
76
      data-slot="menubar-content"
77
      align={align}
78
      alignOffset={alignOffset}
79
      sideOffset={sideOffset}
80
      className={cn(
81
        "min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
82
        className,
83
      )}
84
      {...props}
85
    />
86
  );
87
}
88

89
function MenubarItem({
90
  className,
91
  inset,
92
  variant = "default",
93
  ...props
94
}: ComponentProps<typeof DropdownMenuItem>) {
95
  return (
96
    <DropdownMenuItem
97
      data-slot="menubar-item"
98
      data-inset={inset}
99
      data-variant={variant}
100
      className={cn(
101
        "group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
102
        className,
103
      )}
104
      {...props}
105
    />
106
  );
107
}
108

109
function MenubarCheckboxItem({
110
  className,
111
  children,
112
  checked,
113
  inset,
114
  ...props
115
}: MenuPrimitive.CheckboxItem.Props & {
116
  inset?: boolean;
117
}) {
118
  return (
119
    <MenuPrimitive.CheckboxItem
120
      data-slot="menubar-checkbox-item"
121
      data-inset={inset}
122
      className={cn(
123
        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
124
        className,
125
      )}
126
      checked={checked}
127
      {...props}
128
    >
129
      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
130
        <MenuPrimitive.CheckboxItemIndicator>
131
          <svg
132
            xmlns="http://www.w3.org/2000/svg"
133
            fill="currentColor"
134
            viewBox="0 0 24 24"
135
          >
136
            <path d="M10 18H8v-2h2v2Zm-2-2H6v-2h2v2Zm4-2v2h-2v-2h2Zm-6 0H4v-2h2v2Zm8 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2Zm2-2h-2V6h2v2Z" />
137
          </svg>
138
        </MenuPrimitive.CheckboxItemIndicator>
139
      </span>
140
      {children}
141
    </MenuPrimitive.CheckboxItem>
142
  );
143
}
144

145
function MenubarRadioGroup({
146
  ...props
147
}: ComponentProps<typeof DropdownMenuRadioGroup>) {
148
  return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />;
149
}
150

151
function MenubarRadioItem({
152
  className,
153
  children,
154
  inset,
155
  ...props
156
}: MenuPrimitive.RadioItem.Props & {
157
  inset?: boolean;
158
}) {
159
  return (
160
    <MenuPrimitive.RadioItem
161
      data-slot="menubar-radio-item"
162
      data-inset={inset}
163
      className={cn(
164
        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
165
        className,
166
      )}
167
      {...props}
168
    >
169
      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
170
        <MenuPrimitive.RadioItemIndicator>
171
          <svg
172
            xmlns="http://www.w3.org/2000/svg"
173
            fill="currentColor"
174
            viewBox="0 0 24 24"
175
          >
176
            <path d="M10 18H8v-2h2v2Zm-2-2H6v-2h2v2Zm4-2v2h-2v-2h2Zm-6 0H4v-2h2v2Zm8 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2Zm2-2h-2V6h2v2Z" />
177
          </svg>
178
        </MenuPrimitive.RadioItemIndicator>
179
      </span>
180
      {children}
181
    </MenuPrimitive.RadioItem>
182
  );
183
}
184

185
function MenubarLabel({
186
  className,
187
  inset,
188
  ...props
189
}: ComponentProps<typeof DropdownMenuLabel> & {
190
  inset?: boolean;
191
}) {
192
  return (
193
    <DropdownMenuLabel
194
      data-slot="menubar-label"
195
      data-inset={inset}
196
      className={cn(
197
        "px-1.5 py-1 text-sm font-medium data-inset:pl-7",
198
        className,
199
      )}
200
      {...props}
201
    />
202
  );
203
}
204

205
function MenubarSeparator({
206
  className,
207
  ...props
208
}: ComponentProps<typeof DropdownMenuSeparator>) {
209
  return (
210
    <DropdownMenuSeparator
211
      data-slot="menubar-separator"
212
      className={cn("-mx-1 my-1 h-px bg-border", className)}
213
      {...props}
214
    />
215
  );
216
}
217

218
function MenubarShortcut({
219
  className,
220
  ...props
221
}: ComponentProps<typeof DropdownMenuShortcut>) {
222
  return (
223
    <DropdownMenuShortcut
224
      data-slot="menubar-shortcut"
225
      className={cn(
226
        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
227
        className,
228
      )}
229
      {...props}
230
    />
231
  );
232
}
233

234
function MenubarSub({ ...props }: ComponentProps<typeof DropdownMenuSub>) {
235
  return <DropdownMenuSub data-slot="menubar-sub" {...props} />;
236
}
237

238
function MenubarSubTrigger({
239
  className,
240
  inset,
241
  ...props
242
}: ComponentProps<typeof DropdownMenuSubTrigger> & {
243
  inset?: boolean;
244
}) {
245
  return (
246
    <DropdownMenuSubTrigger
247
      data-slot="menubar-sub-trigger"
248
      data-inset={inset}
249
      className={cn(
250
        "gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
251
        className,
252
      )}
253
      {...props}
254
    />
255
  );
256
}
257

258
function MenubarSubContent({
259
  className,
260
  ...props
261
}: ComponentProps<typeof DropdownMenuSubContent>) {
262
  return (
263
    <DropdownMenuSubContent
264
      data-slot="menubar-sub-content"
265
      className={cn(
266
        "min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
267
        className,
268
      )}
269
      {...props}
270
    />
271
  );
272
}
273

274
export {
275
  Menubar,
276
  MenubarCheckboxItem,
277
  MenubarContent,
278
  MenubarGroup,
279
  MenubarItem,
280
  MenubarLabel,
281
  MenubarMenu,
282
  MenubarPortal,
283
  MenubarRadioGroup,
284
  MenubarRadioItem,
285
  MenubarSeparator,
286
  MenubarShortcut,
287
  MenubarSub,
288
  MenubarSubContent,
289
  MenubarSubTrigger,
290
  MenubarTrigger,
291
};

Update the import paths to match your project setup.

Usage

import {
  Menubar,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/pxl/menubar"

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarItem>
          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>New Window</MenubarItem>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarItem>Share</MenubarItem>
        <MenubarItem>Print</MenubarItem>
      </MenubarGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Composition

Use the following composition to build a Menubar:

Menubar
├── MenubarMenu
│   ├── MenubarTrigger
│   └── MenubarContent
│       ├── MenubarGroup
│       │   ├── MenubarLabel
│       │   ├── MenubarItem
│       │   └── MenubarItem
│       ├── MenubarSeparator
│       ├── MenubarGroup
│       │   ├── MenubarLabel
│       │   ├── MenubarCheckboxItem
│       │   └── MenubarCheckboxItem
│       ├── MenubarSeparator
│       ├── MenubarGroup
│       │   ├── MenubarLabel
│       │   └── MenubarRadioGroup
│       │       ├── MenubarRadioItem
│       │       └── MenubarRadioItem
│       └── MenubarSub
│           ├── MenubarSubTrigger
│           └── MenubarSubContent
│               └── MenubarGroup
│                   ├── MenubarLabel
│                   ├── MenubarItem
│                   └── MenubarItem
└── MenubarMenu
    ├── MenubarTrigger
    └── MenubarContent
        └── MenubarGroup
            ├── MenubarLabel
            ├── MenubarItem
            └── MenubarItem

Checkbox

Use MenubarCheckboxItem for toggleable options.

Radio

Use MenubarRadioGroup and MenubarRadioItem for single-select options.

Submenu

Use MenubarSub, MenubarSubTrigger, and MenubarSubContent for nested menus.

API Reference

See the Base UI Menubar documentation.