Menubar

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

Kobalte

The Menubar component is built on top of Kobalte Menubar, which provides accessible menu, keyboard, and focus behavior.

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

19
export default function MenubarDemo() {
20
  const [showBookmarksBar, setShowBookmarksBar] = createSignal(false);
21
  const [showFullUrls, setShowFullUrls] = createSignal(true);
22

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

Installation

pnpm dlx shadcn@latest add @zaidan/menubar
npx shadcn@latest add @zaidan/menubar
yarn dlx shadcn@latest add @zaidan/menubar
bunx --bun shadcn@latest add @zaidan/menubar

Usage

1
import {
2
  Menubar,
3
  MenubarContent,
4
  MenubarGroup,
5
  MenubarItem,
6
  MenubarMenu,
7
  MenubarSeparator,
8
  MenubarShortcut,
9
  MenubarTrigger,
10
} from "~/components/ui/menubar";

1
<Menubar>
2
  <MenubarMenu>
3
    <MenubarTrigger>File</MenubarTrigger>
4
    <MenubarContent>
5
      <MenubarGroup>
6
        <MenubarItem>
7
          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
8
        </MenubarItem>
9
        <MenubarItem>New Window</MenubarItem>
10
      </MenubarGroup>
11
      <MenubarSeparator />
12
      <MenubarGroup>
13
        <MenubarItem>Share</MenubarItem>
14
        <MenubarItem>Print</MenubarItem>
15
      </MenubarGroup>
16
    </MenubarContent>
17
  </MenubarMenu>
18
</Menubar>

See the Kobalte Menubar documentation for primitive-level options, accessibility, and keyboard behavior.

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.

1
import { createSignal } from "solid-js";
2
import {
3
  Menubar,
4
  MenubarCheckboxItem,
5
  MenubarContent,
6
  MenubarItem,
7
  MenubarMenu,
8
  MenubarSeparator,
9
  MenubarShortcut,
10
  MenubarTrigger,
11
} from "~/components/ui/menubar";
12

13
export default function MenubarCheckbox() {
14
  const [showBookmarksBar, setShowBookmarksBar] = createSignal(false);
15
  const [showFullUrls, setShowFullUrls] = createSignal(true);
16
  const [strikethrough, setStrikethrough] = createSignal(true);
17
  const [code, setCode] = createSignal(false);
18
  const [superscript, setSuperscript] = createSignal(false);
19

20
  return (
21
    <Menubar class="w-72">
22
      <MenubarMenu>
23
        <MenubarTrigger>View</MenubarTrigger>
24
        <MenubarContent class="w-64">
25
          <MenubarCheckboxItem checked={showBookmarksBar()} onChange={setShowBookmarksBar}>
26
            Always Show Bookmarks Bar
27
          </MenubarCheckboxItem>
28
          <MenubarCheckboxItem checked={showFullUrls()} onChange={setShowFullUrls}>
29
            Always Show Full URLs
30
          </MenubarCheckboxItem>
31
          <MenubarSeparator />
32
          <MenubarItem inset>
33
            Reload <MenubarShortcut>⌘R</MenubarShortcut>
34
          </MenubarItem>
35
          <MenubarItem disabled inset>
36
            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
37
          </MenubarItem>
38
        </MenubarContent>
39
      </MenubarMenu>
40
      <MenubarMenu>
41
        <MenubarTrigger>Format</MenubarTrigger>
42
        <MenubarContent>
43
          <MenubarCheckboxItem checked={strikethrough()} onChange={setStrikethrough}>
44
            Strikethrough
45
          </MenubarCheckboxItem>
46
          <MenubarCheckboxItem checked={code()} onChange={setCode}>
47
            Code
48
          </MenubarCheckboxItem>
49
          <MenubarCheckboxItem checked={superscript()} onChange={setSuperscript}>
50
            Superscript
51
          </MenubarCheckboxItem>
52
        </MenubarContent>
53
      </MenubarMenu>
54
    </Menubar>
55
  );
56
}

Radio

Use MenubarRadioGroup and MenubarRadioItem for single-select options.

1
import { createSignal } from "solid-js";
2
import {
3
  Menubar,
4
  MenubarContent,
5
  MenubarItem,
6
  MenubarMenu,
7
  MenubarRadioGroup,
8
  MenubarRadioItem,
9
  MenubarSeparator,
10
  MenubarTrigger,
11
} from "~/components/ui/menubar";
12

13
export default function MenubarRadio() {
14
  const [selectedProfile, setSelectedProfile] = createSignal("benoit");
15
  const [theme, setTheme] = createSignal("system");
16

17
  return (
18
    <Menubar class="w-72">
19
      <MenubarMenu>
20
        <MenubarTrigger>Profiles</MenubarTrigger>
21
        <MenubarContent>
22
          <MenubarRadioGroup value={selectedProfile()} onChange={setSelectedProfile}>
23
            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
24
            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
25
            <MenubarRadioItem value="luis">Luis</MenubarRadioItem>
26
          </MenubarRadioGroup>
27
          <MenubarSeparator />
28
          <MenubarItem inset>Edit...</MenubarItem>
29
          <MenubarItem inset>Add Profile...</MenubarItem>
30
        </MenubarContent>
31
      </MenubarMenu>
32
      <MenubarMenu>
33
        <MenubarTrigger>Theme</MenubarTrigger>
34
        <MenubarContent>
35
          <MenubarRadioGroup value={theme()} onChange={setTheme}>
36
            <MenubarRadioItem value="light">Light</MenubarRadioItem>
37
            <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
38
            <MenubarRadioItem value="system">System</MenubarRadioItem>
39
          </MenubarRadioGroup>
40
        </MenubarContent>
41
      </MenubarMenu>
42
    </Menubar>
43
  );
44
}

Submenu

Use MenubarSub, MenubarSubTrigger, and MenubarSubContent for nested menus.

1
import {
2
  Menubar,
3
  MenubarContent,
4
  MenubarItem,
5
  MenubarMenu,
6
  MenubarSeparator,
7
  MenubarShortcut,
8
  MenubarSub,
9
  MenubarSubContent,
10
  MenubarSubTrigger,
11
  MenubarTrigger,
12
} from "~/components/ui/menubar";
13

14
export default function MenubarSubmenu() {
15
  return (
16
    <Menubar class="w-72">
17
      <MenubarMenu>
18
        <MenubarTrigger>File</MenubarTrigger>
19
        <MenubarContent>
20
          <MenubarSub>
21
            <MenubarSubTrigger>Share</MenubarSubTrigger>
22
            <MenubarSubContent>
23
              <MenubarItem>Email link</MenubarItem>
24
              <MenubarItem>Messages</MenubarItem>
25
              <MenubarItem>Notes</MenubarItem>
26
            </MenubarSubContent>
27
          </MenubarSub>
28
          <MenubarSeparator />
29
          <MenubarItem>
30
            Print... <MenubarShortcut>⌘P</MenubarShortcut>
31
          </MenubarItem>
32
        </MenubarContent>
33
      </MenubarMenu>
34
      <MenubarMenu>
35
        <MenubarTrigger>Edit</MenubarTrigger>
36
        <MenubarContent>
37
          <MenubarItem>
38
            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
39
          </MenubarItem>
40
          <MenubarItem>
41
            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
42
          </MenubarItem>
43
          <MenubarSeparator />
44
          <MenubarSub>
45
            <MenubarSubTrigger>Find</MenubarSubTrigger>
46
            <MenubarSubContent>
47
              <MenubarItem>Find...</MenubarItem>
48
              <MenubarItem>Find Next</MenubarItem>
49
              <MenubarItem>Find Previous</MenubarItem>
50
            </MenubarSubContent>
51
          </MenubarSub>
52
          <MenubarSeparator />
53
          <MenubarItem>Cut</MenubarItem>
54
          <MenubarItem>Copy</MenubarItem>
55
          <MenubarItem>Paste</MenubarItem>
56
        </MenubarContent>
57
      </MenubarMenu>
58
    </Menubar>
59
  );
60
}

With Icons

1
import {
2
  FileIcon,
3
  FolderIcon,
4
  HelpCircleIcon,
5
  SaveIcon,
6
  SettingsIcon,
7
  TrashIcon,
8
} from "lucide-solid";
9
import {
10
  Menubar,
11
  MenubarContent,
12
  MenubarGroup,
13
  MenubarItem,
14
  MenubarMenu,
15
  MenubarSeparator,
16
  MenubarShortcut,
17
  MenubarTrigger,
18
} from "~/components/ui/menubar";
19

20
export default function MenubarIcons() {
21
  return (
22
    <Menubar class="w-72">
23
      <MenubarMenu>
24
        <MenubarTrigger>File</MenubarTrigger>
25
        <MenubarContent>
26
          <MenubarItem>
27
            <FileIcon />
28
            New File <MenubarShortcut>⌘N</MenubarShortcut>
29
          </MenubarItem>
30
          <MenubarItem>
31
            <FolderIcon />
32
            Open Folder
33
          </MenubarItem>
34
          <MenubarSeparator />
35
          <MenubarItem>
36
            <SaveIcon />
37
            Save <MenubarShortcut>⌘S</MenubarShortcut>
38
          </MenubarItem>
39
        </MenubarContent>
40
      </MenubarMenu>
41
      <MenubarMenu>
42
        <MenubarTrigger>More</MenubarTrigger>
43
        <MenubarContent>
44
          <MenubarGroup>
45
            <MenubarItem>
46
              <SettingsIcon />
47
              Settings
48
            </MenubarItem>
49
            <MenubarItem>
50
              <HelpCircleIcon />
51
              Help
52
            </MenubarItem>
53
            <MenubarSeparator />
54
            <MenubarItem variant="destructive">
55
              <TrashIcon />
56
              Delete
57
            </MenubarItem>
58
          </MenubarGroup>
59
        </MenubarContent>
60
      </MenubarMenu>
61
    </Menubar>
62
  );
63
}

API Reference

See the Kobalte Menubar API reference for primitive props, keyboard behavior, and accessibility details.