import {
  Menu,
  MenuTrigger,
  MenuPortal,
  MenuPositioner,
  MenuContent,
  MenuItem,
  MenuCheckboxItem,
  MenuRadioGroup,
  MenuRadioItem,
  MenuLabel,
  MenuSeparator,
  MenuShortcut,
  MenuSub,
  MenuSubTrigger,
  MenuSubContent,
  MenuFilter,
  MenuInput,
  MenuClear,
  MenuEmpty,
  MenuList,
} from "@/components/ui/menu"

#Examples

#Filtering

Wrap the menu in MenuFilter, put MenuInput at the top of the popup, and the items inside MenuList. MenuEmpty shows when nothing matches. Filtering is a Base UI preview, so the API may change.

A filterable submenu needs its own MenuFilter around MenuSub. To separate groups, mark each group data-filter-section and start it with <MenuSeparator data-filter-separator className="hidden" />. MenuList shows the separator only between two visible groups.

#API Reference

Prop	Type	Default	Description
open	boolean	—	The controlled open state of the menu.
defaultOpen	boolean	false	The initial open state for uncontrolled usage.
onOpenChange	(open: boolean) => void	—	Callback fired when the menu open state changes.
modal	boolean	true	Whether the menu enters a modal state when open.
loopFocus	boolean	true	Whether to loop keyboard focus back to the first item when the end is reached.
disabled	boolean	false	Whether the menu should ignore user interaction.
MenuItem.inset	boolean	false	Adds indentation for nested command-style layouts.
MenuCheckboxItem.checked	boolean	—	The controlled checked state of the checkbox item.
MenuCheckboxItem.onCheckedChange	(checked: boolean) => void	—	Callback fired when the checkbox item is ticked or unticked.
MenuRadioGroup.value	any	—	The controlled value of the selected radio item.
MenuRadioGroup.onValueChange	(value: any) => void	—	Callback fired when the selected radio value changes.
MenuRadioItem.value	any	—	Value of the radio item.
MenuLabel.inset	boolean	false	Adds indentation to section labels.
MenuSubTrigger.inset	boolean	false	Adds indentation to submenu triggers.
MenuFilter.value	string	—	The controlled filter query.
MenuFilter.defaultValue	string	—	The uncontrolled filter query when the menu first renders.
MenuFilter.onValueChange	(value: string) => void	—	Callback fired when the filter query changes.
MenuFilter.filter	((text: string, query: string) => boolean) \| null	—	Decides whether an item matches the query. Pass null to filter items yourself.
MenuFilter.autoHighlight	boolean \| 'always'	false	Highlights the first matching item while the query is not empty, or always with 'always'.
MenuInput.children	React.ReactNode	—	Rendered after the input, for placing MenuClear beside it.

Getting started

Foundations

Integrations

Form19

Display5

Layout4

Navigation4

Overlay8

Feedback4

Motion19

Menu

#Installation

#Usage

#Examples

#Filtering

#API Reference