DocsBlog

Get Started

Components

Data Grid

Signals

Styling

Theming

↑↓Navigate
↵Select
EscClose

  • 1.8.0

  • Day

    Night

    Preview

    Switch mode

  • cerberus

    acheron

    elysium

    oceanus

Get Started
Components
Data Grid
Signals
Styling
Theming

Concepts

OverviewCompositionCerberus ContextTesting

Layout

Aspect RatioBleedBoxCenterContainerContainer QueryDividerFlexFloatGridGroupLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTA ModalDate PickerDialogFieldFieldsetFile UploaderIconButtonInputLoading StatesMarqueeMenuNotificationsNumber InputPaginationPin InputPopoverProgress IndicatorsPrompt ModalRadioRatingSelectSliderSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

Utilities

Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFormat Relative TimeFrameHighlightJSON Tree ViewLocalePortalPresenceShowSwapsplitPropsTheme

Menu

A menu component for displaying a list of options.

  • npm
  • source
  • recipe
  • Ark
View as Markdown
Open this page in Markdown
Anthropic
Open in Claude
Ask questions about this page
OpenAI
Open in ChatGPT
Ask questions about this page

Import

import {
  Menu,
  MenuTrigger,
  MenuContent,
  MenuItem,
  MenuItemGroup,
  MenuGroupLabel,
  MenuSeparator,
} from '@cerberus/react'

Usage

Combine the primitives to create a basic Menu.

Loading example...

NextJS Usage

To create a nav menu with NextJS, you should use the Link component from next/link combined with the Cerberus Factory for enhanced styling.

Loading example...

Grouped Menu

You can group menu items by using the MenuItemGroup component.

Loading example...

Positions

The Menu component accepts a positioning prop to determine where the menu will be positioned relative to the trigger. See available positions.

Loading example...

Customization

You can use style props or the Primitives to customize a Menu.

Loading example...

Primitives

You can utilize the primitive components or the css prop to customize the menu.

ComponentDescription
MenuRootThe context provider for the menu parts
MenuTriggerThe trigger that opens the menu content
MenuTriggerItemThe item that triggers a nested menu content
MenuIndicatorThe indicator for the selected menu item
MenuPositionerThe positioning container for the menu content
MenuContentThe content of the menu
MenuItemA single item of the menu
MenuItemGroupA container for a group of menu items
MenuItemGroupLabelThe label for a group of menu items
MenuSeparatorA separator between menu items

API

Props

Root

Props

PropTypeRequiredDefaultDescription
anchorPointPointfalseundefinedThe positioning point for the menu. Can be set by the context menu trigger or the button trigger.
aria-labelstringfalseundefinedThe accessibility label for the menu
closeOnSelectbooleanfalsetrueWhether to close the menu when an option is selected
compositebooleanfalsetrueWhether the menu is a composed with other composite widgets like a combobox or tabs
defaultHighlightedValuestringfalseundefinedThe initial highlighted value of the menu item when rendered. Use when you don't need to control the highlighted value of the menu item.
defaultOpenbooleanfalseundefinedThe initial open state of the menu when rendered. Use when you don't need to control the open state of the menu.
defaultTriggerValuestringfalseundefinedThe initial trigger value when rendered. Use when you don't need to control the trigger value.
hideModeHideModefalse'display-none'How to hide content when mounted but not present.

- 'display-none': HTML hidden attribute. Effects stay alive.
- 'activity': React 19 <Activity mode="hidden">. Effects pause. Requires React 19+.
highlightedValuestringfalseundefinedThe controlled highlighted value of the menu item.
idstringfalseundefinedThe unique identifier of the machine.
idsPartial<{ trigger: string | ((value?: string) => string), contextTrigger: string | ((value?: string) => string), content: string, groupLabel: (id: string) => string, group: (id: string) => string, positioner: string, arrow: string }>falseundefinedThe ids of the elements in the menu. Useful for composition.
immediatebooleanfalseundefinedWhether to synchronize the present change immediately or defer it to the next frame
lazyMountbooleanfalsefalseWhether to enable lazy mounting
loopFocusbooleanfalsefalseWhether to loop the keyboard navigation.
navigate(details: NavigateDetails) => voidfalseundefinedFunction to navigate to the selected item if it's an anchor element
onEscapeKeyDown(event: KeyboardEvent) => voidfalseundefinedFunction called when the escape key is pressed
onExitCompleteVoidFunctionfalseundefinedFunction called when the animation ends in the closed state
onFocusOutside(event: FocusOutsideEvent) => voidfalseundefinedFunction called when the focus is moved outside the component
onHighlightChange(details: HighlightChangeDetails) => voidfalseundefinedFunction called when the highlighted menu item changes.
onInteractOutside(event: InteractOutsideEvent) => voidfalseundefinedFunction called when an interaction happens outside the component
onOpenChange(details: OpenChangeDetails) => voidfalseundefinedFunction called when the menu opens or closes
onPointerDownOutside(event: PointerDownOutsideEvent) => voidfalseundefinedFunction called when the pointer is pressed down outside the component
onRequestDismiss(event: LayerDismissEvent) => voidfalseundefinedFunction called when this layer is closed due to a parent layer being closed
onSelect(details: SelectionDetails) => voidfalseundefinedFunction called when a menu item is selected.
onTriggerValueChange(details: TriggerValueChangeDetails) => voidfalseundefinedFunction called when the trigger value changes.
openbooleanfalseundefinedThe controlled open state of the menu
positioningPositioningOptionsfalseundefinedThe options used to dynamically position the menu
presentbooleanfalseundefinedWhether the node is present (controlled by the user)
skipAnimationOnMountbooleanfalsefalseWhether to allow the initial presence animation.
triggerValuestringfalseundefinedThe controlled trigger value
typeaheadbooleanfalsetrueWhether the pressing printable characters should trigger typeahead navigation
unmountOnExitbooleanfalsefalseWhether to unmount on exit.

Arrow

Props

PropTypeRequiredDefaultDescription
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.

ArrowTip

Props

PropTypeRequiredDefaultDescription
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.

CheckboxItem

Props

PropTypeRequiredDefaultDescription
checkedbooleantrueundefinedWhether the option is checked
valuestringtrueundefinedThe value of the option
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.
closeOnSelectbooleanfalseundefinedWhether the menu should be closed when the option is selected.
disabledbooleanfalseundefinedWhether the menu item is disabled
onCheckedChange(checked: boolean) => voidfalseundefinedFunction called when the option state is changed
valueTextstringfalseundefinedThe textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

Content

Props

PropTypeRequiredDefaultDescription
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.

Data Attributes

AttributeDescription / Value
data-scopemenu
data-partcontent
data-state"open" | "closed"
data-nestedmenu
data-has-nestedmenu
data-placementThe placement of the content
data-sideThe side of the trigger that the content is positioned on

ContextTrigger

Props

PropTypeRequiredDefaultDescription
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.

Data Attributes

AttributeDescription / Value
data-scopemenu
data-partcontext-trigger
data-valueThe value of the item
data-currentPresent when current
data-state"open" | "closed"

Indicator

Props

PropTypeRequiredDefaultDescription
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.

Data Attributes

AttributeDescription / Value
data-scopemenu
data-partindicator
data-state"open" | "closed"

ItemGroupLabel

Props

PropTypeRequiredDefaultDescription
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.

ItemGroup

Props

PropTypeRequiredDefaultDescription
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.

ItemIndicator

Props

PropTypeRequiredDefaultDescription
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.

Data Attributes

AttributeDescription / Value
data-scopemenu
data-partitem-indicator
data-disabledPresent when disabled
data-highlightedPresent when highlighted
data-state"checked"

Item

Props

PropTypeRequiredDefaultDescription
valuestringtrueundefinedThe unique value of the menu item option.
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.
closeOnSelectbooleanfalseundefinedWhether the menu should be closed when the option is selected.
disabledbooleanfalseundefinedWhether the menu item is disabled
onSelectVoidFunctionfalseundefinedThe function to call when the item is selected
valueTextstringfalseundefinedThe textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

Data Attributes

AttributeDescription / Value
data-scopemenu
data-partitem
data-disabledPresent when disabled
data-highlightedPresent when highlighted
data-valueThe value of the item
data-valuetextThe human-readable value

ItemText

Props

PropTypeRequiredDefaultDescription
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.

Data Attributes

AttributeDescription / Value
data-scopemenu
data-partitem-text
data-disabledPresent when disabled
data-highlightedPresent when highlighted
data-state"checked"

Positioner

Props

PropTypeRequiredDefaultDescription
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.

RadioItemGroup

Props

PropTypeRequiredDefaultDescription
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.
onValueChange(e: ValueChangeDetails) => voidfalseundefinedundefined
valuestringfalseundefinedundefined

RadioItem

Props

PropTypeRequiredDefaultDescription
valuestringtrueundefinedThe value of the option
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.
closeOnSelectbooleanfalseundefinedWhether the menu should be closed when the option is selected.
disabledbooleanfalseundefinedWhether the menu item is disabled
valueTextstringfalseundefinedThe textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

RootProvider

Props

PropTypeRequiredDefaultDescription
valueUseMenuReturntrueundefinedundefined
hideModeHideModefalse'display-none'How to hide content when mounted but not present.

- 'display-none': HTML hidden attribute. Effects stay alive.
- 'activity': React 19 <Activity mode="hidden">. Effects pause. Requires React 19+.
immediatebooleanfalseundefinedWhether to synchronize the present change immediately or defer it to the next frame
lazyMountbooleanfalsefalseWhether to enable lazy mounting
onExitCompleteVoidFunctionfalseundefinedFunction called when the animation ends in the closed state
presentbooleanfalseundefinedWhether the node is present (controlled by the user)
skipAnimationOnMountbooleanfalsefalseWhether to allow the initial presence animation.
unmountOnExitbooleanfalsefalseWhether to unmount on exit.

Separator

Props

PropTypeRequiredDefaultDescription
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.

TriggerItem

Props

PropTypeRequiredDefaultDescription
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.

Trigger

Props

PropTypeRequiredDefaultDescription
asChildbooleanfalseundefinedUse the provided child element as the default rendered element, combining their props and behavior.
valuestringfalseundefinedThe value that identifies this specific trigger

Data Attributes

AttributeDescription / Value
data-scopemenu
data-parttrigger
data-placementThe placement of the trigger
data-sideThe side of the trigger that the trigger is positioned on
data-valueThe value of the item
data-currentPresent when current
data-controls
data-state"open" | "closed"

Context

API:

PropertyTypeDescription
openbooleanWhether the menu is open
setOpen(open: boolean) => voidFunction to open or close the menu
triggerValuestring | nullThe trigger value
setTriggerValue(value: string | null) => voidFunction to set the trigger value
highlightedValuestring | nullThe id of the currently highlighted menuitem
setHighlightedValue(value: string) => voidFunction to set the highlighted menuitem
setParent(parent: MenuService) => voidFunction to register a parent menu. This is used for submenus
setChild(child: MenuService) => voidFunction to register a child menu. This is used for submenus
reposition(options?: Partial<PositioningOptions>) => voidFunction to reposition the popover
getOptionItemState(props: OptionItemProps) => OptionItemStateReturns the state of the option item
getItemState(props: ItemProps) => ItemStateReturns the state of the menu item
addItemListener(props: ItemListenerProps) => VoidFunction | undefinedSetup the custom event listener for item selection event

Accessibility

Complies with the Menu WAI-ARIA design pattern.

Keyboard Support

KeyDescription
SpaceActivates/Selects the highlighted item
EnterActivates/Selects the highlighted item
ArrowDownHighlights the next item in the menu
ArrowUpHighlights the previous item in the menu
ArrowRight + ArrowLeftWhen focus is on trigger, opens or closes the submenu depending on reading direction.
EscCloses the menu and moves focus to the trigger

On this page

  • Import
  • Usage
  • NextJS Usage
  • Grouped Menu
  • Positions
  • Customization
  • Primitives
  • API
    • Props
    • Root
      • Props
    • Arrow
      • Props
    • ArrowTip
      • Props
    • CheckboxItem
      • Props
    • Content
      • Props
      • Data Attributes
    • ContextTrigger
      • Props
      • Data Attributes
    • Indicator
      • Props
      • Data Attributes
    • ItemGroupLabel
      • Props
    • ItemGroup
      • Props
    • ItemIndicator
      • Props
      • Data Attributes
    • Item
      • Props
      • Data Attributes
    • ItemText
      • Props
      • Data Attributes
    • Positioner
      • Props
    • RadioItemGroup
      • Props
    • RadioItem
      • Props
    • RootProvider
      • Props
    • Separator
      • Props
    • TriggerItem
      • Props
    • Trigger
      • Props
      • Data Attributes
    • Context
  • Accessibility
    • Keyboard Support
Edit this page on Github
Item 1
Item 2
Item 1Item 2
Sign out
Group Label
Item 1
Item 2
Item 1
Item 2
Item 1
Item 2
Item 1
Item 2
Item 1
Item 2
Hades am I
Hades is also where I live