Menubar

A menubar lines up several menus in one bar, as desktop applications do at the top of a window. Users open a menu with a press on its trigger, and while a menu is open, the pointer and the left and right arrow keys move on to the neighboring menus. A menu closes when users choose an item, press Escape or press outside of it. Checkbox and radio items keep the menu open, so users can change several options in a row. While a menu is open, the page doesn't scroll, and only the menubar and the open menu react to the pointer. A MenubarLabel needs a MenubarGroup or a MenubarRadioGroup around it and names that group for assistive technology.

UsageCopy Anchor Link

import {
	Menubar,
	MenubarContent,
	MenubarItem,
	MenubarMenu,
	MenubarTrigger,
} from "@biem/ui/components/ui/menubar";

export function MenubarDefault() {
	return (
		<Menubar>
			<MenubarMenu>
				<MenubarTrigger>Transfer</MenubarTrigger>
				<MenubarContent>
					<MenubarItem>Add cases</MenubarItem>
					<MenubarItem>Duplicate</MenubarItem>
					<MenubarItem>Print labels</MenubarItem>
				</MenubarContent>
			</MenubarMenu>
			<MenubarMenu>
				<MenubarTrigger>Delivery</MenubarTrigger>
				<MenubarContent>
					<MenubarItem>Check in cases</MenubarItem>
					<MenubarItem>Report damage</MenubarItem>
					<MenubarItem>Print delivery note</MenubarItem>
				</MenubarContent>
			</MenubarMenu>
			<MenubarMenu>
				<MenubarTrigger>Stock</MenubarTrigger>
				<MenubarContent>
					<MenubarItem>Count stock</MenubarItem>
					<MenubarItem>Adjust stock</MenubarItem>
					<MenubarItem>Order cases</MenubarItem>
				</MenubarContent>
			</MenubarMenu>
		</Menubar>
	);
}

ExamplesCopy Anchor Link

With LabelCopy Anchor Link

Actions in a menu often apply to one specific record, such as a single order. A label gives their group a name, so users know what each action refers to before they choose it, and assistive technology announces that name with the group.

With SeparatorCopy Anchor Link

Long menus are easier to scan when related actions stay together. Between two such sets, a separator marks where one ends and the next begins, so users find the actions that change a record apart from those that share it. The division also reaches assistive technology, which reports it as a separator.

With IconCopy Anchor Link

Users who return to a menu every day recognize its actions by their shape before they read them. An icon inside an item offers that cue to the eye, while the text keeps naming the action for everyone who meets it for the first time.

With ShortcutCopy Anchor Link

Experienced users reach frequent actions faster with the keyboard than through a menu. Shown inside an item, the shortcut teaches the key combination whenever users open the menu. It informs only, so the application registers the keys and runs the action itself.

With Checkbox ItemsCopy Anchor Link

Some options can be combined freely, such as the details a report includes. Checkbox items switch each option on or off on its own, and the menu stays open, so users adjust several options in one pass. With defaultChecked, an option is switched on from the start.

With Radio GroupCopy Anchor Link

Where a setting allows exactly one choice, such as the sort order of a list, a radio group lets users select one option and clears the previous one. The menu stays open after each selection, and defaultValue sets the option that applies from the start.

With SubmenuCopy Anchor Link

Rarely used options crowd a menu that users open many times a day. A submenu gathers them behind a single item and opens when the pointer rests on that item, on a press or from the keyboard. Escape then closes only the submenu, so users return to the menu without losing their place.

DestructiveCopy Anchor Link

Deleting a record from a menu often cannot be undone. With variant set to "destructive", the item signals that consequence, so users pause before they choose it.

InsetCopy Anchor Link

When only some items carry an icon, their text no longer lines up. Through inset, an item or a label without an icon takes the same indent, so users read the menu as one even list.

Item as LinkCopy Anchor Link

Navigation menus lead users to another page instead of changing the current one. Given an anchor through render, an item becomes a real link, so users can open the page in a new tab or follow it with the keyboard, as with any link.

ControlledCopy Anchor Link

An application sometimes needs to open a menu itself, for example from a keyboard shortcut elsewhere, or to close it once a longer action has finished. Through open and onOpenChange, it holds the open state of the menu, while users still open and close the menu as usual.

Controlled SubmenuCopy Anchor Link

Some submenus hold options that the application loads only when users open them. The application learns that moment once it holds the state through open and onOpenChange, and it can open or close the submenu on its own as well.

Controlled Checkbox ItemsCopy Anchor Link

Menu options often shape a view elsewhere on the screen, such as the filters of a list. With checked and onCheckedChange, the application holds each option, so the view follows every change at once, and other controls, such as a reset button, can change the options as well.

Controlled Radio GroupCopy Anchor Link

A currency or a unit of measure chosen in a menu often matters beyond the current visit. Once the radio group receives value and onValueChange, the selection lives in the application, which can store it for the next visit or reflect a choice that users made elsewhere.

DisabledCopy Anchor Link

While an import runs or a document is being saved, the actions on that data have to wait. The disabled prop of the menubar locks every trigger at once, so users can't open any menu until the process has finished.

Disabled MenuCopy Anchor Link

Sometimes only one group of actions is unavailable, for example because users lack the permission for it. Applied to a single menu, disabled locks its trigger together with every item, and the other menus stay usable.

Disabled TriggerCopy Anchor Link

Each trigger can also be locked on its own. Users then can't open the menu through a trigger that carries disabled, while the menu itself stays enabled for other triggers that share it.

Disabled ItemCopy Anchor Link

Until an order has been approved, the actions that depend on it cannot run. In that case, disabled keeps users from choosing the item, yet the arrow keys still move to it, so keyboard users also learn that the action exists.

Disabled Submenu TriggerCopy Anchor Link

Whole sets of options can be unavailable at once, for example when a feature isn't part of the current plan. A submenu trigger marked as disabled no longer opens its submenu, while the other items of the menu remain available.

Disabled Radio GroupCopy Anchor Link

Settings reserved for a manager remain visible to everyone else, but only as information. With disabled on the radio group, users can't select another option, and the current selection still shows which setting applies.

API ReferenceCopy Anchor Link

MenubarCopy Anchor Link

MenubarMenuCopy Anchor Link

MenubarTriggerCopy Anchor Link

MenubarPortalCopy Anchor Link

MenubarContentCopy Anchor Link

MenubarGroupCopy Anchor Link

MenubarLabelCopy Anchor Link

MenubarItemCopy Anchor Link

MenubarCheckboxItemCopy Anchor Link

MenubarRadioGroupCopy Anchor Link

MenubarRadioItemCopy Anchor Link

MenubarSubCopy Anchor Link

MenubarSubTriggerCopy Anchor Link

MenubarSubContentCopy Anchor Link

MenubarSeparatorCopy Anchor Link

MenubarShortcutCopy Anchor Link

MenubarShortcut shows the keyboard shortcut of an item at the end of its row and doesn't handle the key press itself. It renders a span and has no props of its own.