Menubar
Horizontal menu bar with multiple menus (File, Edit, View) and full keyboard navigation.
import * as Menubar from '@gentleduck/primitives/menubar'import * as Menubar from '@gentleduck/primitives/menubar'Anatomy
<Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger />
<Menubar.Portal>
<Menubar.Content>
<Menubar.Item />
<Menubar.Separator />
<Menubar.Sub>
<Menubar.SubTrigger />
<Menubar.SubContent>
<Menubar.Item />
</Menubar.SubContent>
</Menubar.Sub>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root><Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger />
<Menubar.Portal>
<Menubar.Content>
<Menubar.Item />
<Menubar.Separator />
<Menubar.Sub>
<Menubar.SubTrigger />
<Menubar.SubContent>
<Menubar.Item />
</Menubar.SubContent>
</Menubar.Sub>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>Example
<Menubar.Root className="flex gap-1 bg-white border rounded-md p-1">
<Menubar.Menu>
<Menubar.Trigger className="px-3 py-1 rounded hover:bg-gray-100 text-sm">
File
</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content className="bg-white shadow-lg rounded-md p-1 min-w-[160px] border">
<Menubar.Item className="px-3 py-1.5 text-sm rounded hover:bg-gray-100">New File</Menubar.Item>
<Menubar.Item className="px-3 py-1.5 text-sm rounded hover:bg-gray-100">Save</Menubar.Item>
<Menubar.Separator className="h-px bg-gray-200 my-1" />
<Menubar.Item className="px-3 py-1.5 text-sm rounded hover:bg-gray-100">Exit</Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
<Menubar.Menu>
<Menubar.Trigger className="px-3 py-1 rounded hover:bg-gray-100 text-sm">
Edit
</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content className="bg-white shadow-lg rounded-md p-1 min-w-[160px] border">
<Menubar.Item className="px-3 py-1.5 text-sm rounded hover:bg-gray-100">Undo</Menubar.Item>
<Menubar.Item className="px-3 py-1.5 text-sm rounded hover:bg-gray-100">Redo</Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root><Menubar.Root className="flex gap-1 bg-white border rounded-md p-1">
<Menubar.Menu>
<Menubar.Trigger className="px-3 py-1 rounded hover:bg-gray-100 text-sm">
File
</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content className="bg-white shadow-lg rounded-md p-1 min-w-[160px] border">
<Menubar.Item className="px-3 py-1.5 text-sm rounded hover:bg-gray-100">New File</Menubar.Item>
<Menubar.Item className="px-3 py-1.5 text-sm rounded hover:bg-gray-100">Save</Menubar.Item>
<Menubar.Separator className="h-px bg-gray-200 my-1" />
<Menubar.Item className="px-3 py-1.5 text-sm rounded hover:bg-gray-100">Exit</Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
<Menubar.Menu>
<Menubar.Trigger className="px-3 py-1 rounded hover:bg-gray-100 text-sm">
Edit
</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content className="bg-white shadow-lg rounded-md p-1 min-w-[160px] border">
<Menubar.Item className="px-3 py-1.5 text-sm rounded hover:bg-gray-100">Undo</Menubar.Item>
<Menubar.Item className="px-3 py-1.5 text-sm rounded hover:bg-gray-100">Redo</Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>API
Menubar.Root
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | -- | Controlled value of the currently open menu |
defaultValue | string | -- | Initial open menu (uncontrolled) |
onValueChange | (value: string) => void | -- | Called when the active menu changes |
loop | boolean | true | Keyboard navigation wraps from last to first |
dir | 'ltr' | 'rtl' | -- | Reading direction for keyboard navigation |
Menubar.Menu
Groups a trigger and its content into one menu entry.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | -- | Unique value identifying this menu |
Keyboard interactions
| Key | Action |
|---|---|
| ArrowRight | Move to next menu in the bar |
| ArrowLeft | Move to previous menu in the bar |
| ArrowDown | Open menu / highlight next item |
| ArrowUp | Highlight previous item |
| Enter / Space | Activate item |
| Escape | Close menu |
All menu-level sub-components (Item, CheckboxItem, RadioGroup, RadioItem, Sub, etc.) work identically to Context Menu.