Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Northstar launch
  • Open on hover
  • With checkbox
  • With switch
  • With radio group
  • With link
  • With group label
  • Nested menu
  • Close on click
  • Open a dialog
  • Disabled
  • Scrollable content
  • Recommendations
  • Usage boundaries
  • API reference

Overlays

Menu

Presents compact actions, choices, and nested commands.

idle

Usage

import {
	Menu,
	MenuCheckboxItem,
	MenuItem,
	MenuPopup,
	MenuSeparator,
	MenuShortcut,
	MenuSub,
	MenuSubPopup,
	MenuSubTrigger,
	MenuTrigger,
} from "@mizen-labs/ui";

Anatomy

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

<Menu>
	<MenuTrigger />
	<MenuPopup>
		<MenuItem>
			<MenuShortcut />
		</MenuItem>
		<MenuItem />
		<MenuSeparator />
		<MenuCheckboxItem />
		<MenuSeparator />
		<MenuSub>
			<MenuSubTrigger />
			<MenuSubPopup>
				<MenuItem />
			</MenuSubPopup>
		</MenuSub>
		<MenuSeparator />
		<MenuItem />
	</MenuPopup>
</Menu>

Examples

Northstar launch

Product team · Project actions

Open on hover

Open using a pointer or the keyboard.

With checkbox

Controlled and uncontrolled selection with a disabled option.

With switch

Checkbox behavior with decorative switch indicators.

With radio group

Controlled selection of one project sort order.

With link

Router links preserve native menu navigation.

With group label

Separate related actions with labels and a divider.

Nested menu

Two submenu levels with centered and start alignment.

Close on click

Choose whether an action dismisses the menu.

Open a dialog

Transfer focus to a dialog and return to the menu trigger.

Disabled

An unavailable menu trigger.

Scrollable content

Bounded results with a long item label.

Recommendations

GuidancePractice
Do

Group related actions and keep destructive commands distinct. Use checkbox or radio items for persistent choices.

Usage boundaries

GuidanceBoundary
Scope

Use link items for navigation. Forms and longer editing tasks belong in Popover or Dialog.

API reference

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

PropTypeDefaultDescription
MenuMenuProps—Native root for controlled open state, callbacks, and detached trigger handles.
MenuCreateHandletypeof MenuCreateHandle—Creates a handle for detached menu triggers.
MenuPortalMenuPortalProps—Native Base UI portal.
MenuTriggerMenuTriggerProps—Opens the menu; supports render, disabled, and openOnHover.
MenuPopupMenuPopupProps—Popup with render, anchor, and portalProps; align=center and sideOffset=4.
MenuGroupMenuGroupProps—Groups related menu items.
MenuItemMenuItemProps—Action row with inset, destructive variant, disabled, and closeOnClick.
MenuLinkItemMenuLinkItemProps—Native anchor or router render target; closeOnClick defaults to true.
MenuCheckboxItemMenuCheckboxItemProps—Native checkbox item; supports controlled state and switch variant.
MenuRadioGroupMenuRadioGroupProps—Native radio selection group with controlled or default values.
MenuRadioItemMenuRadioItemProps—Native radio option with a required value.
MenuGroupLabelMenuGroupLabelProps—Muted section label; supports inset alignment.
MenuSeparatorMenuSeparatorProps—Divider between groups.
MenuShortcutMenuShortcutProps—Native kbd element for shortcut text or Mizen keycaps.
MenuSubMenuSubProps—Native submenu root.
MenuSubTriggerMenuSubTriggerProps—Opens a submenu and remains highlighted while it is open.
MenuSubPopupMenuSubPopupProps—Submenu popup; align=start, sideOffset=0, and alignOffset=-5 unless centered.
MenuPrimitivetypeof MenuPrimitive—Base UI Menu namespace.
PreviousDrawerNextPopover