Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Menu

Used to create an accessible dropdown menu

SourceStorybookRecipeArk

Usage

import { Menu } from "@chakra-ui/react"
<Menu.Root>
  <Menu.Trigger />
  <Menu.Positioner>
    <Menu.Content>
      <Menu.Item />

      <Menu.ItemGroup>
        <Menu.Item />
      </Menu.ItemGroup>

      <Menu.Separator />
      <Menu.Arrow />

      <Menu.CheckboxItem>
        <Menu.ItemIndicator />
      </Menu.CheckboxItem>

      <Menu.RadioItemGroup>
        <Menu.RadioItem>
          <Menu.ItemIndicator />
        </Menu.RadioItem>
      </Menu.RadioItemGroup>
    </Menu.Content>
  </Menu.Positioner>
</Menu.Root>

Examples

Command

Use the Menu.ItemCommand component to display a command in the menu.

Context menu

Use the Menu.ContextTrigger component to create a context menu.

Group

Use the Menu.ItemGroup 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 Menu.Item component to render a link.

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

"use client"

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

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

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.

Anchor Point

Use the positioning.anchorPoint prop to control the anchor point of the menu.

You can derive it from the getBoundingClientRect of a DOM element, or use something like DOMRect.fromRect({ x: 0, y: 0, width: 1, height: 1 }) to create a new rect.

Anchor

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.

Alternatively, you can avoid portalling the Menu.Positioner

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 true
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 true
boolean

Whether to unmount on exit.

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

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