Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsShowcaseBlogGuides
Sponsor

Menu

Used to create an accessible dropdown menu

SourceStorybookRecipeArk
AI TipWant to skip the docs? Use the MCP Server

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.

Avatar

Here's an example that composes the Menu with the Avatar component to display a menu underneath an avatar.

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.

Overflow

When you have a long list of menu items, you can set a maxH prop on the Menu.Content to create a scrollable menu.

note
The content has a default maxHeight: "var(--available-height)", which is the maximum available height for the content relative to the viewport.

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

To use the Menu within a Dialog, you need to avoid portalling the Menu.Positioner to the document's body.

-<Portal>
  <Menu.Positioner>
    <Menu.Content>
      {/* ... */}
    </Menu.Content>
  </Menu.Positioner>
-</Portal>

If you have set scrollBehavior="inside" on the Dialog, you need to:

  • Set the menu positioning to fixed to avoid the menu from being clipped by the dialog.
  • Set hideWhenDetached to true to hide the menu when the trigger is scrolled out of view.
<Menu.Root positioning={{ strategy: "fixed", hideWhenDetached: true }}>
  {/* ... */}
</Menu.Root>

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.

skipAnimationOnMount false
boolean

Whether to allow the initial presence animation.

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'

The color palette of the component

variant 'subtle'
'subtle' | 'solid'

The variant of the component

size 'md'
'sm' | 'md'

The size of the component

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.

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

defaultHighlightedValue
string

The initial highlighted value of the menu item when rendered. Use when you don't need to control the highlighted value of the menu item.

defaultOpen
boolean

The initial open state of the menu when rendered. Use when you don't need to control the open state of the menu.

highlightedValue
string

The controlled highlighted value of the 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
VoidFunction

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

The controlled open state of the menu

positioning
PositioningOptions

The options used to dynamically position the menu

present
boolean

Whether the node is present (controlled by the user)

Item

PropDefaultType
value *
string

The unique value of the menu item option.

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.
closeOnSelect
boolean

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

disabled
boolean

Whether the menu item is disabled

onSelect
VoidFunction

The function to call when the item is selected

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.

Explorer

Explore the Menu component parts interactively. Click on parts in the sidebar to highlight them in the preview.

Component Anatomy

Hover to highlight, click to select parts

arrow

arrowTip

content

contextTrigger

indicator

item

itemGroup

itemGroupLabel

itemIndicator

itemText

positioner

separator

trigger

triggerItem

itemCommand

menu.recipe.ts

Previous

Hover Card

Next

Overlay Manager