Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Menu

Used to create an accessible dropdown menu

SourceStorybookRecipeArk

Setup

If you don't already have the snippet, run the following command to add the menu snippet

npx @chakra-ui/cli snippet add menu

The snippet includes a closed component composition for the Menu component.

Usage

import {
  MenuContent,
  MenuItem,
  MenuRoot,
  MenuTrigger,
} from "@/components/ui/menu"
<MenuRoot>
  <MenuTrigger />
  <MenuContent>
    <MenuItem value="..." />
  </MenuContent>
</MenuRoot>

Examples

Command

Use the MenuItemCommand component to display a command in the menu.

Context menu

Use the MenuContextTrigger component to create a context menu.

Group

Use the MenuItemGroup component to group related menu items.

Danger Item

Here's an example of how to style a menu item that is used to delete an item.

Here's an example of how to create a submenu.

Pass the asChild prop to the MenuItem component to render a link.

When using custom router links, you need to set the navigate prop on the MenuRoot component.

"use client"

import { Menu } from "@/components/ui/menu"
import { useNavigate } from "react-router-dom"

const Demo = () => {
  const navigate = useNavigate()
  return (
    <MenuRoot navigate={({ value, node }) => navigate(`/${value}`)}>
      {/* ... */}
    </MenuRoot>
  )
}

Radio Items

Here's an example of how to create a menu with radio items.

Checkbox Items

Here's an example of how to create a menu with checkbox items.

Icon and Command

Compose the menu to include icons and commands.

Placement

Use the positioning.placement prop to control the placement of the menu.

Mixed Layout

Here's an example of how to create a mixed layout of menu items. In this layout, the top horizontal menu includes common menu items.

Hide When Detached

When the menu is rendered in an scrolling container, set the positioning.hideWhenDetached to true to hide the menu when the trigger is scrolled out of view.

Item0

Item1

Item2

Item3

Item4

Item5

Within Dialog

Here's an example of how to use the menu within a Dialog or Drawer component.

Due to the focus trap within the dialog, it's important to change the portal target from the document's body to the dialog's content.

Props

Root

PropDefaultType
closeOnSelect true
boolean

Whether to close the menu when an option is selected

composite true
boolean

Whether the menu is a composed with other composite widgets like a combobox or tabs

lazyMount false
boolean

Whether to enable lazy mounting

loopFocus false
boolean

Whether to loop the keyboard navigation.

typeahead true
boolean

Whether the pressing printable characters should trigger typeahead navigation

unmountOnExit false
boolean

Whether to unmount on exit.

colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'

The color palette of the component

variant 'subtle'
'subtle' | 'solid'

The variant of the component

size 'md'
'sm' | 'md'

The size of the component

anchorPoint
Point

The positioning point for the menu. Can be set by the context menu trigger or the button trigger.

aria-label
string

The accessibility label for the menu

defaultOpen
boolean

The initial open state of the menu when it is first rendered. Use when you do not need to control its open state.

highlightedValue
string

The value of the highlighted menu item.

id
string

The unique identifier of the machine.

ids
Partial<{ trigger: string contextTrigger: string content: string groupLabel(id: string): string group(id: string): string positioner: string arrow: string }>

The ids of the elements in the menu. Useful for composition.

immediate
boolean

Whether to synchronize the present change immediately or defer it to the next frame

navigate
(details: NavigateDetails) => void

Function to navigate to the selected item if it's an anchor element

onEscapeKeyDown
(event: KeyboardEvent) => void

Function called when the escape key is pressed

onExitComplete
() => void

Function called when the animation ends in the closed state

onFocusOutside
(event: FocusOutsideEvent) => void

Function called when the focus is moved outside the component

onHighlightChange
(details: HighlightChangeDetails) => void

Function called when the highlighted menu item changes.

onInteractOutside
(event: InteractOutsideEvent) => void

Function called when an interaction happens outside the component

onOpenChange
(details: OpenChangeDetails) => void

Function called when the menu opens or closes

onPointerDownOutside
(event: PointerDownOutsideEvent) => void

Function called when the pointer is pressed down outside the component

onSelect
(details: SelectionDetails) => void

Function called when a menu item is selected.

open
boolean

Whether the menu is open

positioning
PositioningOptions

The options used to dynamically position the menu

present
boolean

Whether the node is present (controlled by the user)

as
React.ElementType

The underlying element to render.

asChild
boolean

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

For more details, read our Composition guide.
unstyled
boolean

Whether to remove the component's style.

Item

PropDefaultType
value *
string

The unique value of the menu item option.

asChild
boolean

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

For more details, read our Composition guide.
closeOnSelect
boolean

Whether the menu should be closed when the option is selected.

disabled
boolean

Whether the menu item is disabled

valueText
string

The 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.

Previous

Input

Next

Number Input