MenubarNew

The row of menus along the top of an app: File, Edit, View.

$ pnpm dlx shadcn@latest add @dashral/menubar

Installation

$ pnpm dlx shadcn@latest add @dashral/menubar

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/menubar.json

Usage

example.tsx

1import { Menubar } from "@/components/dashral/menubar"
2
3<Menubar
4  menus={[
5    { label: "File", items: [{ label: "New", shortcut: "⌘N", onSelect: createDocument }, { label: "Open…", shortcut: "⌘O" }] },
6    { label: "Edit", items: [{ label: "Undo", shortcut: "⌘Z" }, { label: "Redo", shortcut: "⇧⌘Z" }] },
7  ]}
8/>

Using the npm package? Import from @dashral/ui/components/menubar instead, here and in the examples; the rest is the same.

API reference

Menubar

Also takes every prop of Radix Menubar(opens in a new tab).

Prop	Type	Default
`menus`	`{ label, items: MenuItem[], disabled?, className? }[]` The menus, in order. items take the same MenuItem as Dropdown Menu. Required.	—
`linkAs`	`ElementType` Your router's link, for items with href.	`"a"`
`value / onValueChange`	`string` The open menu, controlled.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`←`or`→`	Move between menus on the bar, or open the next one while one is open
`Enter`or`Space`or`↓`	Open the focused menu
`↓`or`↑`	Move between items
`Enter`or`Space`	Choose the item (toggle a checkbox or radio item)
`→`	Open a submenu
`←`	Close a submenu
`Escape`	Close the menu and return focus
`A–Z`	Jump to the item starting with that letter

Accessibility

role="menubar" with menus of role="menu"; one menu tab stop on the bar, the arrows move along it.

Motion

Opens with a fade, a scale from 95%, a 2px blur clearing and a 4px slide from its trigger's side, on the spring (--duration-standard); closes faster (--duration-fast, --ease-exit). No blur with reduced motion.