Ravox KitNavigation
Menubar
File, Edit, View: the menu bar of an app, with full WAI-ARIA keyboard support. With a menu open, the arrow keys and the mouse move straight to the neighbor. Items with shortcuts, checkboxes, an option group and submenus.
Última ação: Nada ainda: abra um menu (ou Tab e ↓). · grade ligada · zoom 100%
Settings
Toggles
Examples
Checkboxes and options
Two-level submenu
Installation
The command creates components/ui/menubar.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add menubarProps
| Prop | Type | Default | Description |
|---|---|---|---|
| aria-label | string | "Application menu" | Name of the bar for screen readers (Menubar). |
| label | ReactNode | — | The title in the bar, like File and Edit (MenubarMenu), or the text of the item that opens another menu to the side (MenubarSub). The children are the menu items. |
| onSelect | () => void | — | Click, Enter or Space on the item; the menu closes and focus returns to the bar (MenubarItem). |
| shortcut | string | — | Shortcut text on the right, like "⌘S" (display only; the app binds the key). |
| icon / destructive / disabled / href | ReactNode / boolean / boolean / string | — | Icon in the left space, danger tone, inactive item and an item that is a link (MenubarItem). |
| checked / onCheckedChange | boolean / (checked) => void | — | Item that can be checked and unchecked (MenubarCheckboxItem). |
| value / onValueChange | string / (value) => void | — | Group in which only one option is checked (MenubarRadioGroup with MenubarRadioItem value). |
| MenubarSeparator / MenubarLabel | ComponentProps<"div"> | — | Line between blocks and section title inside the menu. |