Menubar
Desktop-style menus in a row: File, Edit, View.
import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarCheckboxItem, MenubarRadioItem, MenubarSeparator, MenubarSub } from "@flinbu/seed";File, Edit, View
import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger } from "@flinbu/seed";
const [grid, setGrid] = React.useState(true);
<Menubar>
<MenubarMenu><MenubarTrigger>File</MenubarTrigger><MenubarContent><MenubarItem shortcut="⌘N">New token</MenubarItem><MenubarItem shortcut="⌘I">Import…</MenubarItem><MenubarSeparator /><MenubarItem>Export</MenubarItem></MenubarContent></MenubarMenu>
<MenubarMenu><MenubarTrigger>Edit</MenubarTrigger><MenubarContent><MenubarItem shortcut="⌘Z">Undo</MenubarItem><MenubarItem shortcut="⇧⌘Z">Redo</MenubarItem></MenubarContent></MenubarMenu>
<MenubarMenu><MenubarTrigger>View</MenubarTrigger><MenubarContent><MenubarCheckboxItem checked={grid} onCheckedChange={setGrid}>Show grid</MenubarCheckboxItem></MenubarContent></MenubarMenu>
</Menubar>Use it for
- Editors and canvases with many commands.
Use something else for
- Site navigation: use links or the Sidebar.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
Item: icon | IconProp | – | Leading icon. An element like <Search /> (works in server components) or, in client components, the component itself. |
Item: shortcut | ReactNode | – | Shown at the end. |
Item: destructive | boolean | – | Red, for deleting. |
Item: onSelect | (e: Event) => void | – | Runs the command. |
Accessibility
- Built on Radix Menubar: role menubar, left and right move between menus, the same rows as DropdownMenu.