Koala UIMenubar
The File, Edit, View row of a desktop-style app. One tab stop, arrow keys across the menus, and once one is open the next opens on hover. The menus are Dropdown Menu's panels, so both read as one object.
Installation#
Usage#
import {
Menubar,
MenubarMenu,
MenubarTrigger,
MenubarContent,
MenubarItem,
MenubarShortcut,
} from "@/components/ui/menubar"
export function Example() {
return (
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>
New document <MenubarShortcut>⌘N</MenubarShortcut>
</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
)
}Variants#
outline (the default) is the Toolbar's band: a 12px radius around 4px of padding and 8px triggers, so the corners nest concentrically, with an inset edge that takes no layout. plain drops the band for an app header that already owns one. Either way the open menu lights its trigger, so the bar always shows which menu you are in.
Checkbox, radio and switch rows#
The rows are Dropdown Menu's: a checked row or the chosen radio carries the brand check on the right, on the same 12px edge line as the shortcuts. variant="switch" on a checkbox row draws a mini Switch there instead, for a setting that applies the moment it flips, and keeps the menu open so several can be flipped in a row.
Density#
The menus follow the density around the bar: 36px rows when comfortable, 32px when compact. React context crosses the portal the menus open in, so one DensityProvider around the bar sets every menu in it. The edge inset and the corners stay put at either density.
Keyboard#
The whole bar is one tab stop. Left and Right move between menus, Down or Enter opens one, and once a menu is open, Left and Right (or the pointer) open its neighbours instead, the way an application menu behaves. Escape closes the menu and puts focus back on its trigger. Shortcuts are display only: bind the keys yourself.
API reference#
Menubar
The band, role="menubar". Props: variant (outline · plain), plus Radix's value, defaultValue, onValueChange, loop, dir.
MenubarMenu · MenubarTrigger
One menu and the button that opens it; the trigger lights while its menu is open.
MenubarContent
The panel, portalled to the body. It opens align="start" with alignOffset −2 and sideOffset 8, which puts the rows' text on the trigger's text line and clears the band. Takes density.
Rows
MenubarItem (inset, variant="destructive"), MenubarCheckboxItem (variant check · switch, closeOnSelect), MenubarRadioGroup + MenubarRadioItem, MenubarLabel, MenubarSeparator, MenubarShortcut (a Kbd), MenubarGroup, and MenubarSub with MenubarSubTrigger and MenubarSubContent. They are Dropdown Menu's rows, built from its recipe.