Menubar
File, Edit, Help.
Default
Three menus. Open one, then move across the bar.
A row of menus that behaves the way a desktop menu bar does: once one is open, moving the pointer along the bar opens the next, and the arrow keys walk across the bar and down into each menu.
Installation
npx philcn@latest add menubarThe file is written into your project. It is yours from then on — change it as you like.
Props
| Prop | Type | What it does |
|---|---|---|
| Menubar.value | string | Controlled: which menu is open. |
| Menubar.onValueChange | ((value: string) => void) | Called with the menu that just opened. |
| Menubar.loop | boolean | Whether walking past the last menu returns to the first. |
| MenubarMenu.value | string | Names this menu, for when you hold the open one yourself. |
| MenubarItem.variant | "default" | "destructive" | Destructive paints the item red. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.
Worth knowing
- This is for an application, not a website. A site's navigation belongs in a Navigation Menu.