Overlays

Context Menu

Presents contextual actions and choices anchored to pointer coordinates or long press.

idle

Usage

import {
	ContextMenu,
	ContextMenuItem,
	ContextMenuPopup,
	ContextMenuSeparator,
	ContextMenuShortcut,
	ContextMenuTrigger,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<ContextMenu>
	<ContextMenuTrigger />
	<ContextMenuPopup>
		<ContextMenuItem>
			<ContextMenuShortcut />
		</ContextMenuItem>
		<ContextMenuItem />
		<ContextMenuSeparator />
		<ContextMenuItem />
		<ContextMenuSeparator />
		<ContextMenuItem />
	</ContextMenuPopup>
</ContextMenu>

Examples

File workspace actions

With link

Native anchors and router composition.

Nested menu

Two submenu levels with centered and start alignment.

With checkbox

Controlled and uncontrolled selection with a disabled option.

With group label

Group related contextual actions.

With radio group

Choose one file sort order.

Close on click

Choose whether an action dismisses the menu.

Open a dialog

Transfer focus to a dialog and return to the file target.

With switch

Checkbox behavior with decorative switch indicators.

Scrollable content

Render composition in a long, scrollable menu.

Recommendations

Guidance	Practice
Do	Offer actions specific to the resource under the pointer. Match labels to the same actions elsewhere.

Usage boundaries

Guidance	Boundary
Scope	Provide a visible alternative for essential actions. Context menus must not be the only way to complete a task.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`ContextMenu`	`ContextMenuProps`	`—`	Native Base UI root for open state and callbacks.
`ContextMenuPortal`	`ContextMenuPortalProps`	`—`	Native Base UI portal.
`ContextMenuTrigger`	`ContextMenuTriggerProps`	`—`	Right-click, keyboard, and long-press target; supports render.
`ContextMenuPopup`	`ContextMenuPopupProps`	`—`	Popup with render, anchor, and portalProps; align=center and sideOffset=4.
`ContextMenuGroup`	`ContextMenuGroupProps`	`—`	Groups related contextual actions.
`ContextMenuItem`	`ContextMenuItemProps`	`—`	Action row with inset, destructive variant, disabled, and closeOnClick.
`ContextMenuLinkItem`	`ContextMenuLinkItemProps`	`—`	Native anchor or router render target; closeOnClick defaults to true.
`ContextMenuCheckboxItem`	`ContextMenuCheckboxItemProps`	`—`	Native checkbox item with controlled state and switch variant.
`ContextMenuRadioGroup`	`ContextMenuRadioGroupProps`	`—`	Native radio selection group.
`ContextMenuRadioItem`	`ContextMenuRadioItemProps`	`—`	Native radio option with a required value.
`ContextMenuGroupLabel`	`ContextMenuGroupLabelProps`	`—`	Muted group heading with optional inset.
`ContextMenuSeparator`	`ContextMenuSeparatorProps`	`—`	Divider between groups.
`ContextMenuShortcut`	`ContextMenuShortcutProps`	`—`	Native kbd element for shortcut text or Mizen keycaps.
`ContextMenuSub`	`ContextMenuSubProps`	`—`	Native submenu root.
`ContextMenuSubTrigger`	`ContextMenuSubTriggerProps`	`—`	Opens a submenu; preserves highlighting and cap-aligned labels.
`ContextMenuSubPopup`	`ContextMenuSubPopupProps`	`—`	Submenu popup; align=start, sideOffset=0, alignOffset=-5 unless centered.
`ContextMenuPrimitive`	`typeof ContextMenuPrimitive`	`—`	Base UI Context Menu namespace.