Menu

function MenuExample() {
  return (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start' }}>
      <Menu items={[{ label: 'Star Wars' }, { label: 'Star Trek' }]}>
        <Button>Open</Button>
      </Menu>
    </div>
  );
}

Props

items

required

TypeArray

Array of menu items to be rendered in the menu. Each item can be either a regular menu item or a separator.

children

TypeReactElement

The trigger element that will open the menu when clicked. This element will be wrapped in a button with appropriate ARIA attributes.

offset

Typenumber | OffsetAxes

Distance between a popup and the trigger element

onOpenChange

Typesignature

Callback fired when the component requests to be opened or closed. Receives the next open state and the native event that triggered the change (if any).

open

Typeboolean | undefined

Controls whether the menu is open or closed. When omitted, the menu's open state will be managed internally and toggled by clicking on the `children` trigger element.

placement

TypePlacement | undefined

Default'bottom-end'

The preferred placement of the menu relative to its trigger element. Uses Floating UI placement options. @default 'bottom-end'

size

TypeItemSize

Default'medium'

Size variant for the menu items. @default 'medium'