Navigation
Menubar
Horizontal menu bar with dropdowns, checkboxes, radio items, and keyboard navigation.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/menubar
Examples
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
Menubar, MenubarMenu, MenubarTrigger,
MenubarContent, MenubarItem, MenubarShortcut,
} from "@codefast/ui/menubar";
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
API reference
Props for each part of the component. All native element props are also forwarded.
Menubar / MenubarMenu
The horizontal bar and each top-level menu.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | One MenubarMenu per top-level menu (File, Edit…). |
MenubarItem / MenubarShortcut
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | A command row; MenubarShortcut shows its key hint. Also supports checkbox/radio items. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Arrow+Left | Moves between top-level menus. |
| Arrow+Down | Opens / moves down a menu. |
| Enter | Activates the focused item. |
| Esc | Closes the open menu. |
- Implements the ARIA menubar pattern with roving focus.
- Best on desktop; on mobile prefer a Dropdown Menu or Sheet.
- Mirror essential commands elsewhere — don’t hide them only here.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Group commands the way a desktop app would (File, Edit, View).
- Show shortcuts so power users learn them.
Don’t
- Don’t use a menubar as primary site navigation.
- Don’t nest menus deeply.