<Menu.Root>
  <Menu.Trigger>
    <Menu.Button emphasis="primary">Show Menu</Menu.Button>
  </Menu.Trigger>
  <Portal>
    <Menu.Positioner>
      <Menu.Content>
        <Menu.Item value="new-txt">New Text File</Menu.Item>
        <Menu.Item value="new-file">New File...</Menu.Item>
        <Menu.Root positioning={{gutter: 2, placement: "right-start"}}>
          <Menu.TriggerItem value="open-recent">
            Open Recent
          </Menu.TriggerItem>
          <Portal>
            <Menu.Positioner>
              <Menu.Content>
                <Menu.Item value="file-1">File 1</Menu.Item>
                <Menu.Item value="file-2">File 2</Menu.Item>
                <Menu.Item value="file-3">File 3</Menu.Item>
              </Menu.Content>
            </Menu.Positioner>
          </Portal>
        </Menu.Root>
      </Menu.Content>
    </Menu.Positioner>
  </Portal>
</Menu.Root>

Links

Menu items can be links using polymorphic composition. Use the render prop on the <Menu.Item> to specify the element type.

Brand

<Menu.Content>
  <Menu.Item
    render={
      <a href="https://react.dev" rel="noreferrer" target="_blank" />
    }
    value="react"
  >
    <Menu.ItemStartIcon icon={ExternalLink} />
    React
  </Menu.Item>
  <Menu.Item
    render={
      <a
        href="https://angular.dev"
        rel="noreferrer"
        target="_blank"
      />
    }
    value="angular"
  >
    <Menu.ItemStartIcon icon={ExternalLink} />
    Angular
  </Menu.Item>
</Menu.Content>

Groups

Use the <Menu.ItemGroup> component to group menu items.

Item Types

There are three item types, each corresponding to one of the three types of aria menu item roles:

<Menu.Item> — menuitem
<Menu.RadioItem> — menuitemradio
<Menu.CheckboxItem> — menuitemcheckbox

Checkbox Items

There are two appearance options:

For a checkbox appearance, render the <Menu.CheckboxItemControl> element as a child of the item.
Render the <Menu.ItemIndicator /> element for a simple selection indicator.

Brand

<Menu.ItemGroup>
  <Menu.ItemGroupLabel>Choose an option</Menu.ItemGroupLabel>
  <Menu.CheckboxItem value="item-1-1">
    <Menu.CheckboxItemControl />
    <Menu.ItemLabel>Option 1</Menu.ItemLabel>
  </Menu.CheckboxItem>
  <Menu.CheckboxItem value="item-1-2">
    <Menu.CheckboxItemControl />
    <Menu.ItemLabel>Option 2</Menu.ItemLabel>
  </Menu.CheckboxItem>
</Menu.ItemGroup>

<Menu.ItemGroup>
  <Menu.ItemGroupLabel>Choose an option</Menu.ItemGroupLabel>
  <Menu.CheckboxItem value="item-2-1">
    <Menu.ItemLabel>Option 1</Menu.ItemLabel>
    <Menu.ItemIndicator />
  </Menu.CheckboxItem>
  <Menu.CheckboxItem value="item-2-2">
    <Menu.ItemLabel>Option 2</Menu.ItemLabel>
    <Menu.ItemIndicator />
  </Menu.CheckboxItem>
</Menu.ItemGroup>

Checkbox Selection State

Illustrates how to manage and reflect the checked state of checkbox menu items.

Brand

<Menu.ItemGroup>
  <Menu.ItemGroupLabel>Choose an option</Menu.ItemGroupLabel>
  {items.map(({label, value}) => (
    <Menu.CheckboxItem
      key={value}
      checked={checkboxState[value] || false}
      onCheckedChange={(checked) => onChange(value, checked)}
      value={value}
    >
      <Menu.ItemLabel>{label}</Menu.ItemLabel>
      <Menu.ItemIndicator />
    </Menu.CheckboxItem>
  ))}
</Menu.ItemGroup>

Radio Group

Demonstrates how to group radio menu items so only one can be selected at a time.

Brand

Controlled State

The menu's visibility can be controlled via the open, onOpenChange, and defaultOpen props.

Use open to explicitly set whether the menu is open (controlled mode).
Use onOpenChange to be notified when the menu requests to open or close.
Use defaultOpen to set the initial open state when you don't need to control it yourself (uncontrolled mode).

In controlled mode, the open prop should be updated in response to onOpenChange events to reflect the desired visibility.

Brand

Placement

Configure the menu's placement using the positioning.placement prop.

Brand

Sizes

Use the size prop to control the size of the menu. The default size is md. The demo features the small (sm) size.

Brand

Anchor Point

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

Brand

Anchor

Avatar

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

Brand

Within Dialog

When using the Menu inside a Dialog, don't render the <Menu.Positioner> within a <Portal> element.

Brand

Hide When Detached

Use the positioning.hideWhenDetached prop to hide the menu when it's detached from the trigger.

Brand

Item 0

Item 1

Item 2

Item 3

Item 4

Item 5

API

Prop	Type	Default
children ^* React children prop.	ReactNode
anchorPoint The positioning point for the menu. Can be set by the context menu trigger or the button trigger.	{ x: number y: number }
closeOnSelect Whether to close the menu when an option is selected	boolean	true
composite Whether the menu is composed with other composite widgets like a combobox or tabs	boolean	true
defaultHighlightedValue 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.	string
defaultOpen The initial open state of the menu when rendered. Use when you don't need to control the open state of the menu.	boolean
dir The document's text/writing direction.	'ltr' \| 'rtl'	'ltr'
getRootNode A root node to correctly resolve document in custom environments. i.e., Iframes, Electron.	() => \| Node \| ShadowRoot \| Document
highlightedValue The controlled highlighted value of the menu item.	string
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
immediate Whether to synchronize the present change immediately or defer it to the next frame	boolean
lazyMount When true, the component will not be rendered in the DOM until it becomes visible or active.	boolean	false
loopFocus Whether to loop the keyboard navigation.	boolean	false
navigate Function to navigate to the selected item if it's an anchor element	(details: { href: string node: HTMLAnchorElement value: string }) => void
onEscapeKeyDown Function called when the escape key is pressed	( event: KeyboardEvent, ) => void
onExitComplete Function called when the animation ends in the closed state	VoidFunction
onFocusOutside Function called when the focus is moved outside the component	( event: FocusOutsideEvent, ) => void
onHighlightChange Function called when the highlighted menu item changes.	( value: string, ) => void
onInteractOutside Function called when an interaction happens outside the component	( event: InteractOutsideEvent, ) => void
onOpenChange Function called when the menu opens or closes	( open: boolean, ) => void
onPointerDownOutside Function called when the pointer is pressed down outside the component	( event: PointerDownOutsideEvent, ) => void
onRequestDismiss Function called when this layer is closed due to a parent layer being closed	( event: CustomEvent<{ originalIndex: number originalLayer: HTMLElement targetIndex: number targetLayer: HTMLElement }>, ) => void
onSelect Function called when a menu item is selected.	( value: string, ) => void
open The controlled open state of the menu	boolean
positioning The options used to dynamically position the menu	PositioningOptions
present Whether the node is present (controlled by the user)	boolean
size	'sm' \| 'md'
skipAnimationOnMount Whether to allow the initial presence animation.	boolean	false
typeahead Whether the pressing printable characters should trigger typeahead navigation	boolean	true
unmountOnExit When true, the component will be completely removed from the DOM when it becomes inactive or hidden, rather than just being hidden with CSS.	boolean	false

children

Type

ReactNode

Description

React children prop.

anchorPoint

Type

{
  x: number
  y: number
}

Description

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

closeOnSelect

Type

boolean

Description

Whether to close the menu when an option is selected

composite

Type

boolean

Description

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

defaultHighlightedValue

Type

string

Description

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

Type

boolean

Description

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

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

getRootNode

Type

() =>
| Node
| ShadowRoot
| Document

Description

A root node to correctly resolve document in custom environments. i.e., Iframes, Electron.

highlightedValue

Type

string

Description

The controlled highlighted value of the menu item.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

immediate

Type

boolean

Description

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

lazyMount

Type

boolean

Description

When true, the component will not be rendered in the DOM until it becomes visible or active.

loopFocus

Type

boolean

Description

Whether to loop the keyboard navigation.

navigate

Type

(details: {
  href: string
  node: HTMLAnchorElement
  value: string
}) => void

Description

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

onEscapeKeyDown

Type

(
  event: KeyboardEvent,
) => void

Description

Function called when the escape key is pressed

onExitComplete

Type

VoidFunction

Description

Function called when the animation ends in the closed state

onFocusOutside

Type

(
  event: FocusOutsideEvent,
) => void

Description

Function called when the focus is moved outside the component

onHighlightChange

Type

(
  value: string,
) => void

Description

Function called when the highlighted menu item changes.

onInteractOutside

Type

(
  event: InteractOutsideEvent,
) => void

Description

Function called when an interaction happens outside the component

onOpenChange

Type

(
  open: boolean,
) => void

Description

Function called when the menu opens or closes

onPointerDownOutside

Type

(
  event: PointerDownOutsideEvent,
) => void

Description

Function called when the pointer is pressed down outside the component

onRequestDismiss

Type

(
  event: CustomEvent<{
    originalIndex: number
    originalLayer: HTMLElement
    targetIndex: number
    targetLayer: HTMLElement
  }>,
) => void

Description

Function called when this layer is closed due to a parent layer being closed

onSelect

Type

(
  value: string,
) => void

Description

Function called when a menu item is selected.

open

Type

boolean

Description

The controlled open state of the menu

positioning

Type

PositioningOptions

Description

The options used to dynamically position the menu

present

Type

boolean

Description

Whether the node is present (controlled by the user)

size

Type

'sm' | 'md'

skipAnimationOnMount

Type

boolean

Description

Whether to allow the initial presence animation.

typeahead

Type

boolean

Description

Whether the pressing printable characters should trigger typeahead navigation

unmountOnExit

Type

boolean

Description

When true, the component will be completely removed from the DOM when it becomes inactive or hidden, rather than just being hidden with CSS.

PositioningOptions

The positioning prop accepts an object with the following shape:

Prop	Type	Default
arrowPadding The minimum padding between the arrow and the floating element's corner.	number	4
boundary The overflow boundary of the reference element	() => \| 'clippingAncestors' \| Element \| Array<Element> \| { height: number width: number x: number y: number }
fitViewport Whether the popover should fit the viewport.	boolean
flip Whether to flip the placement when the floating element overflows the boundary.	\| boolean \| Array< \| 'bottom' \| 'bottom-end' \| 'bottom-start' \| 'left' \| 'left-end' \| 'left-start' \| 'right' \| 'right-end' \| 'right-start' \| 'top' \| 'top-end' \| 'top-start' >	true
getAnchorRect Function that returns the anchor rect	( element: \| HTMLElement \| VirtualElement, ) => { height?: number width?: number x?: number y?: number }
gutter The main axis offset or gap between the reference and floating element	number	8
hideWhenDetached Whether the popover should be hidden when the reference element is detached	boolean
listeners Options to activate auto-update listeners	\| boolean \| { ancestorResize?: boolean ancestorScroll?: boolean animationFrame?: boolean elementResize?: boolean layoutShift?: boolean }	true
offset The offset of the floating element	{ crossAxis?: number mainAxis?: number }
onComplete Function called when the placement is computed	( data: ComputePositionReturn, ) => void
onPositioned Function called when the floating element is positioned or not	(data: { placed: boolean }) => void
overflowPadding The virtual padding around the viewport edges to check for overflow	number
overlap Whether the floating element can overlap the reference element	boolean	false
placement The initial placement of the floating element	\| 'bottom' \| 'bottom-end' \| 'bottom-start' \| 'left' \| 'left-end' \| 'left-start' \| 'right' \| 'right-end' \| 'right-start' \| 'top' \| 'top-end' \| 'top-start'	'bottom'
sameWidth Whether to make the floating element same width as the reference element	boolean
shift The secondary axis offset or gap between the reference and floating elements	number
slide Whether the popover should slide when it overflows.	boolean
strategy The strategy to use for positioning	\| 'absolute' \| 'fixed'	'absolute'
updatePosition A callback that will be called when the popover needs to calculate its position.	(data: { updatePosition: () => Promise<void> }) => void \| Promise<void>

arrowPadding

Type

number

Description

The minimum padding between the arrow and the floating element's corner.

boundary

Type

() =>
| 'clippingAncestors'
| Element
| Array<Element>
| {
    height: number
    width: number
    x: number
    y: number
  }

Description

The overflow boundary of the reference element

fitViewport

Type

boolean

Description

Whether the popover should fit the viewport.

flip

Type

| boolean
| Array<
    | 'bottom'
    | 'bottom-end'
    | 'bottom-start'
    | 'left'
    | 'left-end'
    | 'left-start'
    | 'right'
    | 'right-end'
    | 'right-start'
    | 'top'
    | 'top-end'
    | 'top-start'
  >

Description

Whether to flip the placement when the floating element overflows the boundary.

getAnchorRect

Type

(
  element:
    | HTMLElement
    | VirtualElement,
) => {
  height?: number
  width?: number
  x?: number
  y?: number
}

Description

Function that returns the anchor rect

gutter

Type

number

Description

The main axis offset or gap between the reference and floating element

hideWhenDetached

Type

boolean

Description

Whether the popover should be hidden when the reference element is detached

listeners

Type

| boolean
| {
    ancestorResize?: boolean
    ancestorScroll?: boolean
    animationFrame?: boolean
    elementResize?: boolean
    layoutShift?: boolean
  }

Description

Options to activate auto-update listeners

offset

Type

{
  crossAxis?: number
  mainAxis?: number
}

Description

The offset of the floating element

onComplete

Type

(
  data: ComputePositionReturn,
) => void

Description

Function called when the placement is computed

onPositioned

Type

(data: {
  placed: boolean
}) => void

Description

Function called when the floating element is positioned or not

overflowPadding

Type

number

Description

The virtual padding around the viewport edges to check for overflow

overlap

Type

boolean

Description

Whether the floating element can overlap the reference element

placement

Type

| 'bottom'
| 'bottom-end'
| 'bottom-start'
| 'left'
| 'left-end'
| 'left-start'
| 'right'
| 'right-end'
| 'right-start'
| 'top'
| 'top-end'
| 'top-start'

Description

The initial placement of the floating element

sameWidth

Type

boolean

Description

Whether to make the floating element same width as the reference element

shift

Type

number

Description

The secondary axis offset or gap between the reference and floating elements

slide

Type

boolean

Description

Whether the popover should slide when it overflows.

strategy

Type

| 'absolute'
| 'fixed'

Description

The strategy to use for positioning

updatePosition

Type

(data: {
  updatePosition: () => Promise<void>
}) => void | Promise<void>

Description

A callback that will be called when the popover needs to calculate its position.

Element API

The following describes the individual subcomponents of the Menu component.

Prop	Type	Default
children React children prop.	ReactNode
density The density of the button. Governs padding and height.	\| 'default' \| 'compact'	'default'
disabled Controls whether the component is interactive. When `true`, pointer/focus events are blocked, and the component is visually dimmed.	boolean	false
emphasis The style variant of the button. Governs colors.	\| 'neutral' \| 'primary' \| 'danger' \| 'white-persistent' \| 'black-persistent'	'neutral'
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
size The size of the component and its icons.	\| 'sm' \| 'md' \| 'lg'	'md'
startIcon Icon positioned before the text content. If supplied as a `LucideIcon`, the size will automatically match the size prop. Supply as a `ReactElement` for additional customization.	\| LucideIcon \| ReactNode
variant The style variant of the button. Governs colors.	\| 'fill' \| 'ghost' \| 'outline'	'fill'

children

Type

ReactNode

Description

React children prop.

density

Type

| 'default'
| 'compact'

Description

The density of the button. Governs padding and height.

disabled

Type

boolean

Description

Controls whether the component is interactive. When true, pointer/focus events are blocked, and the component is visually dimmed.

emphasis

Type

| 'neutral'
| 'primary'
| 'danger'
| 'white-persistent'
| 'black-persistent'

Description

The style variant of the button. Governs colors.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

size

Type

| 'sm'
| 'md'
| 'lg'

Description

The size of the component and its icons.

startIcon

Type

| LucideIcon
| ReactNode

Description

Icon positioned before the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.

variant

Type

| 'fill'
| 'ghost'
| 'outline'

Description

The style variant of the button. Governs colors.

Prop	Type	Default
density The density of the button. Governs padding and height.	\| 'default' \| 'compact'	'default'
disabled Controls whether the component is interactive. When `true`, pointer/focus events are blocked, and the component is visually dimmed.	boolean	false
emphasis The style variant of the button. Governs colors.	\| 'neutral' \| 'primary' \| 'danger' \| 'white-persistent' \| 'black-persistent'	'neutral'
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
size The size of the component and its icons.	\| 'sm' \| 'md' \| 'lg'	'md'
variant The style variant of the button. Governs colors.	\| 'fill' \| 'ghost' \| 'outline'	'fill'

density

Type

| 'default'
| 'compact'

Description

The density of the button. Governs padding and height.

disabled

Type

boolean

Description

Controls whether the component is interactive. When true, pointer/focus events are blocked, and the component is visually dimmed.

emphasis

Type

| 'neutral'
| 'primary'
| 'danger'
| 'white-persistent'
| 'black-persistent'

Description

The style variant of the button. Governs colors.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

size

Type

| 'sm'
| 'md'
| 'lg'

Description

The size of the component and its icons.

variant

Type

| 'fill'
| 'ghost'
| 'outline'

Description

The style variant of the button. Governs colors.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Enhances a child element to open the menu when clicked. Requires a single child element.

<Menu.Trigger>
  <button>Open</button>
</Menu.Trigger>

Prop	Type
children ^* React children Render Prop	BindingRenderProp<MenuTriggerBindings>
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string

children

Type

BindingRenderProp<MenuTriggerBindings>

Description

React children Render Prop

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

Prop	Type
value ^* The unique value of the menu item option.	string
children React children prop.	ReactNode
closeOnSelect Whether the menu should be closed when the option is selected.	boolean
disabled Whether the menu item is disabled	boolean
onSelect The function to call when the item is selected	() => void
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
valueText 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.	string

value

Type

string

Description

The unique value of the menu item option.

children

Type

ReactNode

Description

React children prop.

closeOnSelect

Type

boolean

Description

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

disabled

Type

boolean

Description

Whether the menu item is disabled

onSelect

Type

() => void

Description

The function to call when the item is selected

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

valueText

Type

string

Description

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.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Entity not found: MenuItemControlProps

Learn more

Prop	Type
children React children prop.	ReactNode
id id for this item group.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id for this item group.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Prop	Type
icon ^* lucide-react icon or JSX Element.	\| LucideIcon \| ReactNode
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

icon

Type

| LucideIcon
| ReactNode

Description

lucide-react icon or JSX Element.

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Prop	Type
value ^* The value of the option	string
checked Whether the option is checked	boolean
children React children prop.	ReactNode
closeOnSelect Whether the menu should be closed when the option is selected.	boolean
disabled Whether the menu item is disabled	boolean
onCheckedChange Function called when the option state is changed	( checked: boolean, ) => void
onSelect The function to call when the item is selected	() => void
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
valueText 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.	string

value

Type

string

Description

The value of the option

checked

Type

boolean

Description

Whether the option is checked

children

Type

ReactNode

Description

React children prop.

closeOnSelect

Type

boolean

Description

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

disabled

Type

boolean

Description

Whether the menu item is disabled

onCheckedChange

Type

(
  checked: boolean,
) => void

Description

Function called when the option state is changed

onSelect

Type

() => void

Description

The function to call when the item is selected

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

valueText

Type

string

Description

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.

Prop	Type	Default
children React children prop.	ReactNode	<Checkbox.IndicatorIcon />
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Prop	Type
value ^* The unique value of the menu item option.	string
children React children prop.	ReactNode
closeOnSelect Whether the menu should be closed when the option is selected.	boolean
disabled Whether the menu item is disabled	boolean
onSelect The function to call when the item is selected	() => void
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
valueText 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.	string

value

Type

string

Description

The unique value of the menu item option.

children

Type

ReactNode

Description

React children prop.

closeOnSelect

Type

boolean

Description

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

disabled

Type

boolean

Description

Whether the menu item is disabled

onSelect

Type

() => void

Description

The function to call when the item is selected

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

valueText

Type

string

Description

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.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Prop	Type
children React children prop.	ReactNode
id	string
onValueChange	( value: string, ) => void
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
value	string

children

Type

ReactNode

Description

React children prop.

Type

string

onValueChange

Type

(
  value: string,
) => void

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

value

Type

string

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

A menu item that triggers a submenu on hover or click. Renders a <button> element by default.

Prop	Type	Default
value ^* The unique value of the menu item option.	string
children React children prop.	ReactNode
closeOnSelect Whether the menu should be closed when the option is selected.	boolean
disabled Whether the menu item is disabled	boolean
icon Icon to display next to the label, which indicates that this menu item is a trigger for a submenu.	\| LucideIcon \| ReactNode	ChevronRight
onSelect The function to call when the item is selected	() => void
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
valueText 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.	string

value

Type

string

Description

The unique value of the menu item option.

children

Type

ReactNode

Description

React children prop.

closeOnSelect

Type

boolean

Description

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

disabled

Type

boolean

Description

Whether the menu item is disabled

icon

Type

| LucideIcon
| ReactNode

Description

Icon to display next to the label, which indicates that this menu item is a trigger for a submenu.

onSelect

Type

() => void

Description

The function to call when the item is selected

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

valueText

Type

string

Description

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.

Drawer

Popover