Context Menu

A context menu opens at the pointer when users right-click an area or long-press it on a touch screen. It offers the actions that belong to that area, so users act on an entry without moving to a toolbar. An item runs an action, toggles an option, selects one of several values or opens a submenu. A ContextMenuLabel needs a ContextMenuGroup or a ContextMenuRadioGroup around it and names that group for assistive technology.

UsageCopy Anchor Link

import {
	ContextMenu,
	ContextMenuContent,
	ContextMenuItem,
	ContextMenuTrigger,
} from "@biem/ui/components/ui/context-menu";

export function ContextMenuDefault() {
	return (
		<div className="w-full max-w-sm">
			<ContextMenu>
				<ContextMenuTrigger>
					<div className="flex h-36 items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground">
						Right-click transfer 4821
					</div>
				</ContextMenuTrigger>
				<ContextMenuContent>
					<ContextMenuItem>Open transfer</ContextMenuItem>
					<ContextMenuItem>Edit quantity</ContextMenuItem>
					<ContextMenuItem>Print packing list</ContextMenuItem>
				</ContextMenuContent>
			</ContextMenu>
		</div>
	);
}

ExamplesCopy Anchor Link

DestructiveCopy Anchor Link

Cancelling an order or discarding a stock count often cannot be reversed. Inside the menu, variant set to "destructive" signals that consequence, so users recognize the risk of an item before they choose it.

With IconsCopy Anchor Link

Menus that users open many times a day benefit from a visual anchor for each action. An icon lets users find a familiar action at a glance, while the label still names the outcome and keeps the action clear wherever the icon alone would leave doubt.

InsetCopy Anchor Link

Not every action has a fitting icon. With inset, an item without one and the label of its group begin their text where the items with an icon begin theirs, so users scan every label along one line.

With ShortcutsCopy Anchor Link

Frequent actions deserve a faster route than the menu. Shown in the menu, a shortcut teaches users the key combination of an item, so next time they trigger the action straight from the keyboard. Responding to those keys remains the task of the application, since the shortcut only displays them.

With SeparatorCopy Anchor Link

When a menu mixes actions of different kinds, such as viewing an entry and changing it, users take it in faster in sections. Each separator sets one section apart from the next and marks the boundary for assistive technology as well.

With GroupsCopy Anchor Link

Some menus gather actions that concern different things, such as a product and the supplier that delivers it. A ContextMenuGroup with a ContextMenuLabel gives each set a name, so users know what its actions refer to, and assistive technology names the group the same way.

With SubmenuCopy Anchor Link

Related actions, such as the formats in which a list can be exported, would lengthen the menu if each stood on its own. Collected in a submenu, they appear only once users rest the pointer on its trigger, click it or reach it with the keyboard, and the main menu stays short.

With Checkbox ItemsCopy Anchor Link

Several options can apply to one entry at the same time, and users switch each of them on or off independently. The menu stays open after every change, so users adjust them all in one pass, and through defaultChecked an option starts out switched on.

With Radio ItemsCopy Anchor Link

Some settings hold exactly one value out of several, such as the unit in which a stock list shows its quantities. Selecting a radio item replaces the previous choice, and the menu stays open so users see the result. Through defaultValue, the radio group starts with a value already selected.

Top SideCopy Anchor Link

Areas close to the lower edge of a screen, such as a bar with totals, leave little room below the pointer. Set to "top", side opens the menu above the pointer, where the space is.

Bottom SideCopy Anchor Link

Headers of tables and pages sit at the top of a screen and lead into the content below them. Through side set to "bottom", the menu opens beneath the spot users clicked, toward the content its actions concern.

Left SideCopy Anchor Link

Along the right edge of a screen, such as in a side panel, little room remains to the right of the pointer. Set to "left", side opens the menu on the other side of the pointer, toward the middle of the screen.

Right SideCopy Anchor Link

Most areas offer enough room to the right of the pointer, where the menu opens by default. The value "right" of side states this placement explicitly.

ControlledCopy Anchor Link

A list whose figures update live should stay still while users choose an action for one of its entries. With open and onOpenChange, the application holds the open state of the menu, so it knows when to pause the updates and can close the menu itself once the entry changes.

Controlled SubmenuCopy Anchor Link

Options inside a submenu sometimes depend on data worth loading only on demand, such as the warehouses that currently hold stock of a product. Because ContextMenuSub accepts open and onOpenChange, the application knows when users open the submenu and fetches that data at the right moment.

Controlled Checkbox ItemCopy Anchor Link

An option in the menu often mirrors a setting that also appears elsewhere, such as a flag in the detail view of an order. Once the item receives checked and onCheckedChange, the application holds its state, so both places always agree and the change can be saved at once.

Controlled Radio GroupCopy Anchor Link

Choices made in the menu can take effect right away, such as the priority that decides when the warehouse picks an order. Through value and onValueChange on the radio group, the application holds the selected value and passes each new choice on without delay.

DisabledCopy Anchor Link

While an entry is locked, for example because another user is editing it, its actions do not apply. Set on the context menu, disabled keeps it from opening, and a right-click then brings up the menu of the browser instead.

Disabled ItemCopy Anchor Link

Individual actions may not apply to an entry yet, such as booking a delivery that has not arrived. The item keeps its place with disabled, so users learn that the action exists, yet it cannot be chosen and assistive technology announces it as unavailable.

Disabled Submenu TriggerCopy Anchor Link

Sometimes a whole set of related actions is out of reach, such as exporting a report before its figures are complete. A submenu trigger with disabled no longer opens its submenu, while users still see that these actions exist.

Disabled Radio GroupCopy Anchor Link

After an order has been released to the warehouse, its delivery method is fixed. With disabled on the radio group, users still see the value that applies, but none of the radio items accepts another choice.

API ReferenceCopy Anchor Link

ContextMenuCopy Anchor Link

ContextMenuPortalCopy Anchor Link

ContextMenuTriggerCopy Anchor Link

ContextMenuContentCopy Anchor Link

ContextMenuGroupCopy Anchor Link

ContextMenuLabelCopy Anchor Link

ContextMenuItemCopy Anchor Link

ContextMenuSubCopy Anchor Link

ContextMenuSubTriggerCopy Anchor Link

ContextMenuSubContentCopy Anchor Link

ContextMenuCheckboxItemCopy Anchor Link

ContextMenuRadioGroupCopy Anchor Link

ContextMenuRadioItemCopy Anchor Link

ContextMenuSeparatorCopy Anchor Link

ContextMenuShortcutCopy Anchor Link

ContextMenuShortcut shows the key combination of an item at the end of its row, and the application handles the keys itself. It renders a span and has no props of its own.