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

TypeOffsetOptions

Distance between a popup and the trigger element

onOpenChange

Typesignature

Callback fired when the component requests to be opened or closed.

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'