Docs/Menubar

Menubar

Horizontal menu bar with file-style menu items. Client component.

Usage

tsx

1'use client'
2import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarShortcut } from '@storm-ds/ui'
3
4<Menubar>
5  <MenubarMenu>
6    <MenubarTrigger>File</MenubarTrigger>
7    <MenubarContent>
8      <MenubarItem>New</MenubarItem>
9      <MenubarItem>Open</MenubarItem>
10    </MenubarContent>
11  </MenubarMenu>
12</Menubar>

Default

tsx

1'use client'
2import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarShortcut } from '@storm-ds/ui'
3
4function MenubarDemo() {
5  return (
6    <Menubar>
7      <MenubarMenu>
8        <MenubarTrigger>File</MenubarTrigger>
9        <MenubarContent>
10          <MenubarItem>New</MenubarItem>
11          <MenubarItem>Open</MenubarItem>
12          <MenubarSeparator />
13          <MenubarItem>Save</MenubarItem>
14        </MenubarContent>
15      </MenubarMenu>
16      <MenubarMenu>
17        <MenubarTrigger>Edit</MenubarTrigger>
18        <MenubarContent>
19          <MenubarItem>
20            Copy
21            <MenubarShortcut>Ctrl+C</MenubarShortcut>
22          </MenubarItem>
23          <MenubarItem>
24            Paste
25            <MenubarShortcut>Ctrl+V</MenubarShortcut>
26          </MenubarItem>
27        </MenubarContent>
28      </MenubarMenu>
29    </Menubar>
30  )
31}

With Shortcuts

tsx

1<Menubar>
2  <MenubarMenu>
3    <MenubarTrigger>File</MenubarTrigger>
4    <MenubarContent>
5      <MenubarItem>
6        New
7        <MenubarShortcut>Ctrl+N</MenubarShortcut>
8      </MenubarItem>
9      <MenubarItem>
10        Open
11        <MenubarShortcut>Ctrl+O</MenubarShortcut>
12      </MenubarItem>
13    </MenubarContent>
14  </MenubarMenu>
15</Menubar>

Note

Horizontal menu bar with dropdown menus. Use MenubarShortcut to display keyboard shortcuts on the right.

Props

Prop	Type	Default	Description
className	string	-	Custom classes on any sub-component

Use with AI

Create a Next.js client component using Storm UI's Menubar. Import: `import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarShortcut } from '@storm-ds/ui'`. Use 'use client'. Creates a horizontal menu bar (like File/Edit/View in desktop apps). Each MenubarMenu contains MenubarTrigger (the label) and MenubarContent (dropdown). Use MenubarSeparator for dividers. Use MenubarShortcut as a child of MenubarItem to show keyboard shortcuts aligned right. Supports className on any sub-component. Example: `<Menubar><MenubarMenu><MenubarTrigger>File</MenubarTrigger><MenubarContent><MenubarItem>New</MenubarItem><MenubarItem>Open<MenubarShortcut>Ctrl+O</MenubarShortcut></MenubarItem></MenubarContent></MenubarMenu></Menubar>`

NavigationMenu

NavItem