A horizontal menu bar with dropdown menus, keyboard navigation, and submenus. Built on Radix Menubar.

Import

import {
  Menubar, MenubarMenu, MenubarTrigger, MenubarContent,
  MenubarItem, MenubarSeparator, MenubarSub, MenubarSubTrigger,
  MenubarSubContent, MenubarCheckboxItem, MenubarShortcut,
} from "@sigil-ui/components";

Preview

Usage

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
      <MenubarItem>Open <MenubarShortcut>⌘O</MenubarShortcut></MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Quit <MenubarShortcut>⌘Q</MenubarShortcut></MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Undo <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
      <MenubarItem>Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut></MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

With submenu

<MenubarContent>
  <MenubarSub>
    <MenubarSubTrigger>Share</MenubarSubTrigger>
    <MenubarSubContent>
      <MenubarItem>Email</MenubarItem>
      <MenubarItem>Slack</MenubarItem>
    </MenubarSubContent>
  </MenubarSub>
</MenubarContent>

Token integration

CSS Variable	Used for
`--s-surface`	Menu content background
`--s-surface-elevated`	Item hover background
`--s-text`	Item text
`--s-text-muted`	Shortcut text
`--s-border`	Separator and border
`--s-radius-md`	Menu border radius
`--s-shadow-lg`	Menu elevation
`--s-duration-fast`	Open/close animation

Props

MenubarItem

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Disable the item
`onSelect`	`() => void`	—	Selection handler
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Item content

Accessibility

Full keyboard navigation: arrow keys, Enter, Escape
role="menubar" with role="menuitem" children
Focus is trapped within open menus

Menubar

On this page