import { Menu } from "~/components/ui/menu";

<Menu.Root>
  <Button variant="outline">Open</Button>

  <Popover.Content>
    <Menu.Content>
      <Menu.Item>Inbox</Menu.Item>
      <Menu.Item>Sent</Menu.Item>
      <Menu.Item>New Message</Menu.Item>
    </Menu.Content>
  </Popover.Content>
</Menu.Root>;

Examples

Checkboxes

Preview

Code

Radio Group

Preview

Code

API Reference

Menu.Root

Prop	Type	Default
`children`	`ReactNode`
`isOpen`	`boolean`
`defaultOpen`	`boolean`
`onOpenChange`	`function`

Menu.Content

Prop	Type	Default
`children`	`ReactNode \| function`
`items`	`Iterable<T>`
`selectionMode`	`enum`
`selectedKeys`	`Iterable<Key>`
`defaultSelectedKeys`	`Iterable<Key>`
`onSelectionChange`	`function`
`onAction`	`function`
`variant`	`enum`

Menu.Item

Prop	Type	Default
`id`	`Key`
`textValue`	`string`
`isDisabled`	`boolean`
`onAction`	`function`
`variant`	`enum`
`inset`	`boolean`
`children`	`ReactNode`

Menu.Group

Prop	Type	Default
`children`	`ReactNode`

Menu.Label

Prop	Type	Default
`children`	`ReactNode`
`inset`	`boolean`
`className`	`string`

Menu.Separator

Prop	Type	Default
`className`	`string`

Menu.Sub

Prop	Type	Default
`children`	`ReactNode`

Menu.Empty

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

List Box Popover

On This Page

Installation
Anatomy
Examples
Checkboxes
Radio Group
API Reference
Menu.Root
Menu.Content
Menu.Item
Menu.Group
Menu.Label
Menu.Separator
Menu.Sub
Menu.Empty

Contribute