---
title: Menu
description: "`Menu` is a component that displays a common dropdown menu."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/menu/menu.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/menu
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-menu--basic
---

```tsx
<Menu.Root>
  <Menu.Trigger>
    <Button>Menu</Button>
  </Menu.Trigger>

  <Menu.Content>
    <Menu.Item value="naruto">うずまきナルト</Menu.Item>
    <Menu.Item value="sasuke">うちはサスケ</Menu.Item>
    <Menu.Item value="sakura">春野サクラ</Menu.Item>
  </Menu.Content>
</Menu.Root>
```

## Usage

```tsx
import { Menu } from "@yamada-ui/react"
```

```tsx
import { Menu } from "@/components/ui"
```

```tsx
import { Menu } from "@workspaces/ui"
```

```tsx
<Menu.Root>
  <Menu.Trigger />
  <Menu.ContextTrigger />
  <Menu.Anchor />
  <Menu.Content>
    <Menu.Header />
    <Menu.Group>
      <Menu.Item>
        <Menu.Label />
        <Menu.Indicator />
        <Menu.Command />
      </Menu.Item>
    </Menu.Group>
    <Menu.Separator />
    <Menu.OptionGroup>
      <Menu.OptionItem />
    </Menu.OptionGroup>
    <Menu.Footer />
  </Menu.Content>
</Menu.Root>
```

### Use Items

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    { label: "うずまきナルト", value: "naruto" },
    { label: "うちはサスケ", value: "sasuke" },
    { label: "春野サクラ", value: "sakura" },
  ],
  [],
)

return (
  <Menu.Root>
    <Menu.Trigger>
      <Button>Menu</Button>
    </Menu.Trigger>

    <Menu.Content items={items} />
  </Menu.Root>
)
```

### Change Size

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    { label: "うずまきナルト", value: "naruto" },
    { label: "うちはサスケ", value: "sasuke" },
    { label: "春野サクラ", value: "sakura" },
  ],
  [],
)

return (
  <HStack>
    <For each={["sm", "md", "lg"]}>
      {(size) => (
        <Menu.Root key={size} size={size}>
          <Menu.Trigger>
            <Button>{toTitleCase(size)}</Button>
          </Menu.Trigger>

          <Menu.Content items={items} />
        </Menu.Root>
      )}
    </For>
  </HStack>
)
```

### Handle Selection Event

To handle selection event, use `onSelect`.

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    { label: "うずまきナルト", value: "naruto" },
    { label: "うちはサスケ", value: "sasuke" },
    { label: "春野サクラ", value: "sakura" },
  ],
  [],
)

return (
  <Menu.Root onSelect={(value) => console.log("selected", value)}>
    <Menu.Trigger>
      <Button>Menu</Button>
    </Menu.Trigger>

    <Menu.Content items={items} />
  </Menu.Root>
)
```

### Add Dividers

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    { label: "うずまきナルト", value: "naruto" },
    { label: "うちはサスケ", value: "sasuke" },
    { label: "春野サクラ", value: "sakura" },
    { type: "separator" },
    { label: "大蛇丸", value: "orochimaru" },
    { label: "自來也", value: "pervy-sage" },
    { label: "綱手", value: "tsunade" },
  ],
  [],
)

return (
  <HStack>
    <Menu.Root>
      <Menu.Trigger>
        <Button>Menu with items</Button>
      </Menu.Trigger>

      <Menu.Content items={items} />
    </Menu.Root>

    <Menu.Root>
      <Menu.Trigger>
        <Button>Menu with composition</Button>
      </Menu.Trigger>

      <Menu.Content>
        <Menu.Item value="naruto">うずまきナルト</Menu.Item>
        <Menu.Item value="sasuke">うちはサスケ</Menu.Item>
        <Menu.Item value="sakura">春野サクラ</Menu.Item>

        <Menu.Separator />

        <Menu.Item value="orochimaru">大蛇丸</Menu.Item>
        <Menu.Item value="pervy-sage">自來也</Menu.Item>
        <Menu.Item value="tsunade">綱手</Menu.Item>
      </Menu.Content>
    </Menu.Root>
  </HStack>
)
```

### Grouping

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    {
      items: [
        { label: "うずまきナルト", value: "naruto" },
        { label: "うちはサスケ", value: "sasuke" },
        { label: "春野サクラ", value: "sakura" },
      ],
      label: "第七班",
    },
    {
      items: [
        { label: "大蛇丸", value: "orochimaru" },
        { label: "自來也", value: "pervy-sage" },
        { label: "綱手", value: "tsunade" },
      ],
      label: "伝説の三忍",
    },
  ],
  [],
)

return (
  <HStack>
    <Menu.Root>
      <Menu.Trigger>
        <Button>Menu with items</Button>
      </Menu.Trigger>

      <Menu.Content items={items} />
    </Menu.Root>

    <Menu.Root>
      <Menu.Trigger>
        <Button>Menu with composition</Button>
      </Menu.Trigger>

      <Menu.Content>
        <Menu.Group label="第七班">
          <Menu.Item value="naruto">うずまきナルト</Menu.Item>
          <Menu.Item value="sasuke">うちはサスケ</Menu.Item>
          <Menu.Item value="sakura">春野サクラ</Menu.Item>
        </Menu.Group>

        <Menu.Separator />

        <Menu.Group label="伝説の三忍">
          <Menu.Item value="orochimaru">大蛇丸</Menu.Item>
          <Menu.Item value="pervy-sage">自來也</Menu.Item>
          <Menu.Item value="tsunade">綱手</Menu.Item>
        </Menu.Group>
      </Menu.Content>
    </Menu.Root>
  </HStack>
)
```

### Display Icons

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    {
      label: (
        <>
          <Menu.Indicator>
            <PlusIcon />
          </Menu.Indicator>
          New Tab
        </>
      ),
      value: "tab",
    },
    {
      label: (
        <>
          <Menu.Indicator>
            <SquareArrowOutUpRightIcon />
          </Menu.Indicator>
          New Window
        </>
      ),
      value: "window",
    },
    {
      label: (
        <>
          <Menu.Indicator>
            <SquarePenIcon />
          </Menu.Indicator>
          New File
        </>
      ),
      value: "file",
    },
  ],
  [],
)

return (
  <HStack>
    <Menu.Root>
      <Menu.Trigger>
        <Button>Menu with items</Button>
      </Menu.Trigger>

      <Menu.Content items={items} />
    </Menu.Root>

    <Menu.Root>
      <Menu.Trigger>
        <Button>Menu with composition</Button>
      </Menu.Trigger>

      <Menu.Content>
        <Menu.Item value="tab">
          <Menu.Indicator>
            <PlusIcon />
          </Menu.Indicator>
          New Tab
        </Menu.Item>
        <Menu.Item value="window">
          <Menu.Indicator>
            <SquareArrowOutUpRightIcon />
          </Menu.Indicator>
          New Window
        </Menu.Item>
        <Menu.Item value="file">
          <Menu.Indicator>
            <SquarePenIcon />
          </Menu.Indicator>
          New File
        </Menu.Item>
      </Menu.Content>
    </Menu.Root>
  </HStack>
)
```

### Display Commands

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    {
      label: (
        <>
          New Tab
          <Menu.Command>⌘T</Menu.Command>
        </>
      ),
      value: "tab",
    },
    {
      label: (
        <>
          New Window
          <Menu.Command>⌘N</Menu.Command>
        </>
      ),
      value: "window",
    },
    {
      label: (
        <>
          Open File
          <Menu.Command>⌘O</Menu.Command>
        </>
      ),
      value: "file",
    },
  ],
  [],
)

return (
  <HStack>
    <Menu.Root>
      <Menu.Trigger>
        <Button>Menu with items</Button>
      </Menu.Trigger>

      <Menu.Content items={items} />
    </Menu.Root>

    <Menu.Root>
      <Menu.Trigger>
        <Button>Menu with composition</Button>
      </Menu.Trigger>

      <Menu.Content>
        <Menu.Item value="tab">
          New Tab
          <Menu.Command>⌘T</Menu.Command>
        </Menu.Item>
        <Menu.Item value="window">
          New Window
          <Menu.Command>⌘N</Menu.Command>
        </Menu.Item>
        <Menu.Item value="file">
          Open File
          <Menu.Command>⌘O</Menu.Command>
        </Menu.Item>
      </Menu.Content>
    </Menu.Root>
  </HStack>
)
```

### Set Selectable Items

```tsx
const [value, setValue] = useState<string[]>(["naruto"])
const items = useMemo<Menu.Item[]>(
  () => [
    {
      type: "checkbox",
      items: [
        { label: "うずまきナルト", value: "naruto" },
        { label: "うちはサスケ", value: "sasuke" },
        { label: "春野サクラ", value: "sakura" },
        { label: "はたけカカシ", value: "kakashi", disabled: true },
      ],
      value,
      onChange: setValue,
    },
  ],
  [value],
)

return (
  <HStack>
    <Menu.Root>
      <Menu.Trigger>
        <Button>Menu with items</Button>
      </Menu.Trigger>

      <Menu.Content items={items} />
    </Menu.Root>

    <Menu.Root>
      <Menu.Trigger>
        <Button>Menu with composition</Button>
      </Menu.Trigger>

      <Menu.Content>
        <Menu.OptionGroup type="checkbox" value={value} onChange={setValue}>
          <Menu.OptionItem value="naruto">うずまきナルト</Menu.OptionItem>
          <Menu.OptionItem value="sasuke">うちはサスケ</Menu.OptionItem>
          <Menu.OptionItem value="sakura">春野サクラ</Menu.OptionItem>
          <Menu.OptionItem disabled value="kakashi">
            はたけカカシ
          </Menu.OptionItem>
        </Menu.OptionGroup>
      </Menu.Content>
    </Menu.Root>
  </HStack>
)
```

### Nested Menu

```tsx
<Menu.Root>
  <Menu.Trigger>
    <Button>Menu</Button>
  </Menu.Trigger>

  <Menu.Content>
    <Menu.Item value="naruto">うずまきナルト</Menu.Item>
    <Menu.Item value="sasuke">うちはサスケ</Menu.Item>
    <Menu.Item value="sakura">春野サクラ</Menu.Item>

    <Menu.Root>
      <Menu.Trigger>
        <Menu.Item>Settings</Menu.Item>
      </Menu.Trigger>

      <Menu.Content>
        <Menu.Item value="extensions">Extensions</Menu.Item>
        <Menu.Item value="theme">Theme</Menu.Item>
        <Menu.Item value="tasks">User Tasks</Menu.Item>
      </Menu.Content>
    </Menu.Root>
  </Menu.Content>
</Menu.Root>
```

### Use Context Menu

```tsx
<Menu.Root>
  <Menu.ContextTrigger>
    <Center
      borderStyle="dashed"
      borderWidth="1px"
      h="xs"
      p="md"
      rounded="l2"
      w="full"
    >
      <Text>Right Click Here</Text>
    </Center>
  </Menu.ContextTrigger>

  <Menu.Content>
    <Menu.Item value="copy">Copy</Menu.Item>
    <Menu.Item value="paste">Paste</Menu.Item>
    <Menu.Item value="delete">Delete</Menu.Item>
  </Menu.Content>
</Menu.Root>
```

### Display Menu on Different Element

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    { label: "うずまきナルト", value: "naruto" },
    { label: "うちはサスケ", value: "sasuke" },
    { label: "春野サクラ", value: "sakura" },
  ],
  [],
)

return (
  <Menu.Root>
    <HStack>
      <Menu.Anchor>
        <Center borderWidth="1px" h="10" px="3" rounded="l2">
          Here display Popover
        </Center>
      </Menu.Anchor>

      <Menu.Trigger>
        <Button>Menu</Button>
      </Menu.Trigger>
    </HStack>

    <Menu.Content items={items} />
  </Menu.Root>
)
```

### Disable Close on Select

To disable the close on select, set `closeOnSelect` to `false`.

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    { label: "うずまきナルト", value: "naruto" },
    { label: "うちはサスケ", value: "sasuke" },
    { label: "春野サクラ", value: "sakura" },
  ],
  [],
)
return (
  <Menu.Root closeOnSelect={false}>
    <Menu.Trigger>
      <Button>Menu</Button>
    </Menu.Trigger>

    <Menu.Content items={items} />
  </Menu.Root>
)
```

### Set Initial Focus

To set initial focus, pass a `Ref` to `initialFocusRef`.

```tsx
const ref = useRef<HTMLDivElement>(null)

return (
  <Menu.Root initialFocusRef={ref}>
    <Menu.Trigger>
      <Button>Menu</Button>
    </Menu.Trigger>

    <Menu.Content>
      <Menu.Item value="status">Set Status</Menu.Item>
      <Menu.Item ref={ref} value="profile">
        Edit Profile
      </Menu.Item>
      <Menu.Item value="preferences">Preferences</Menu.Item>
    </Menu.Content>
  </Menu.Root>
)
```

### Change Placement

To change the display position, set `placement` to `"start"`, `"end-end"`, etc. By default, `"end-start"` is set.

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    { label: "うずまきナルト", value: "naruto" },
    { label: "うちはサスケ", value: "sasuke" },
    { label: "春野サクラ", value: "sakura" },
  ],
  [],
)

return (
  <HStack>
    <For
      each={[
        "start",
        "start-start",
        "start-end",
        "end",
        "end-start",
        "end-end",
      ]}
    >
      {(placement) => (
        <Menu.Root key={placement} placement={placement}>
          <Menu.Trigger>
            <Button>{toTitleCase(placement)}</Button>
          </Menu.Trigger>

          <Menu.Content items={items} />
        </Menu.Root>
      )}
    </For>
  </HStack>
)
```

### Change Animation

To change the animation, set `animationScheme` to `"inline-start"`, `"block-end"`, etc. By default, `"scale"` is set.

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    { label: "うずまきナルト", value: "naruto" },
    { label: "うちはサスケ", value: "sasuke" },
    { label: "春野サクラ", value: "sakura" },
  ],
  [],
)

return (
  <HStack>
    <For
      each={["scale", "block-end", "block-start", "inline-start", "inline-end"]}
    >
      {(animationScheme) => (
        <Menu.Root key={animationScheme} animationScheme={animationScheme}>
          <Menu.Trigger>
            <Button>{toTitleCase(animationScheme)}</Button>
          </Menu.Trigger>

          <Menu.Content items={items} />
        </Menu.Root>
      )}
    </For>
  </HStack>
)
```

### Change Offset

To change the offset, set a value to `gutter` or `offset`.

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    { label: "うずまきナルト", value: "naruto" },
    { label: "うちはサスケ", value: "sasuke" },
    { label: "春野サクラ", value: "sakura" },
  ],
  [],
)
return (
  <HStack>
    <Menu.Root gutter={32}>
      <Menu.Trigger>
        <Button>Menu</Button>
      </Menu.Trigger>

      <Menu.Content items={items} />
    </Menu.Root>

    <Menu.Root offset={[16, 16]}>
      <Menu.Trigger>
        <Button>Menu</Button>
      </Menu.Trigger>

      <Menu.Content items={items} />
    </Menu.Root>
  </HStack>
)
```

### Change Duration

To change the duration, set a numerical value (seconds) to `duration`.

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    { label: "うずまきナルト", value: "naruto" },
    { label: "うちはサスケ", value: "sasuke" },
    { label: "春野サクラ", value: "sakura" },
  ],
  [],
)

return (
  <Menu.Root duration={0.4}>
    <Menu.Trigger>
      <Button>Menu</Button>
    </Menu.Trigger>

    <Menu.Content items={items} />
  </Menu.Root>
)
```

### Access Internal State

To access internal state, pass a function to the `children` of `Menu.Root`.

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    { label: "うずまきナルト", value: "naruto" },
    { label: "うちはサスケ", value: "sasuke" },
    { label: "春野サクラ", value: "sakura" },
  ],
  [],
)

return (
  <Menu.Root>
    {({ open }) => (
      <>
        <Menu.Trigger>
          <Button>{open ? "Close" : "Open"} Menu</Button>
        </Menu.Trigger>

        <Menu.Content items={items} />
      </>
    )}
  </Menu.Root>
)
```

### Disable Close on Outside Click

To disable closing when clicking outside, set `closeOnBlur` to `false`.

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    { label: "うずまきナルト", value: "naruto" },
    { label: "うちはサスケ", value: "sasuke" },
    { label: "春野サクラ", value: "sakura" },
  ],
  [],
)
return (
  <Menu.Root closeOnBlur={false}>
    <Menu.Trigger>
      <Button>Menu</Button>
    </Menu.Trigger>

    <Menu.Content items={items} />
  </Menu.Root>
)
```

### Disabling Items

To disable items, set `disabled` to `true`.

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    { label: "うずまきナルト", value: "naruto" },
    { label: "うちはサスケ", value: "sasuke", disabled: true },
    { label: "春野サクラ", value: "sakura" },
  ],
  [],
)

return (
  <Menu.Root>
    <Menu.Trigger>
      <Button>Menu</Button>
    </Menu.Trigger>

    <Menu.Content items={items} />
  </Menu.Root>
)
```

### Add Header or Footer

To add header or footer, set `ReactNode` to `header` or `footer` of `Menu.Content`.

```tsx
const items = useMemo<Menu.Item[]>(
  () => [
    { label: "うずまきナルト", value: "naruto" },
    { label: "うちはサスケ", value: "sasuke" },
    { label: "春野サクラ", value: "sakura" },
    { label: "大蛇丸", value: "orochimaru" },
    { label: "自來也", value: "pervy-sage" },
    { label: "綱手", value: "tsunade" },
  ],
  [],
)

return (
  <Menu.Root>
    <Menu.Trigger>
      <Button>Menu</Button>
    </Menu.Trigger>

    <Menu.Content
      header="キャラクター"
      footer="キャラクター"
      items={items}
      maxH="2xs"
    />
  </Menu.Root>
)
```

### Control

```tsx
const { open, onOpen, onClose } = useDisclosure()

const items = useMemo<Menu.Item[]>(
  () => [
    { label: "うずまきナルト", value: "naruto" },
    { label: "うちはサスケ", value: "sasuke" },
    { label: "春野サクラ", value: "sakura" },
  ],
  [],
)

return (
  <Menu.Root open={open} onOpen={onOpen} onClose={onClose}>
    <Menu.Trigger>
      <Button>Menu</Button>
    </Menu.Trigger>

    <Menu.Content items={items} />
  </Menu.Root>
)
```

## Uses Components & Hooks

<Uses name="menu" />

## Used By Components & Hooks

<UsedBy name="menu" />

## Props

### Menu.Root

| Prop                   | Default       | Type                                                                                                                                                                                                                                                                                                                                    | Description                                                                                                                                                                                    |
| ---------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `size`                 | `"md"`        | `"lg" \| "md" \| "sm"`                                                                                                                                                                                                                                                                                                                  | The size of the component.                                                                                                                                                                     |
| `animationScheme`      | `"scale"`     | `"scale" \| "none" \| SimplePlacement`                                                                                                                                                                                                                                                                                                  | The animation of the element.                                                                                                                                                                  |
| `autoUpdate`           | `true`        | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, automatically updates the position of the floating element when necessary.                                                                                                          |
| `blockScrollOnMount`   | `false`       | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, scrolling will be disabled on the `body` when the modal opens.                                                                                                                      |
| `children`             | -             | `string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| ((props: { ...; }) => ReactNode)`                                                                                                                                        | The children of the popover.                                                                                                                                                                   |
| `closeOnBlur`          | `true`        | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the popover will close when you blur out it by clicking outside or tabbing out.                                                                                                     |
| `closeOnEsc`           | `true`        | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the popover will hide on pressing Esc key.                                                                                                                                          |
| `closeOnScroll`        | `false`       | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the popover will hide on scroll.                                                                                                                                                    |
| `closeOnSelect`        | `true`        | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the menu item will be closed when selected.                                                                                                                                         |
| `defaultOpen`          | -             | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the element will be initially opened.                                                                                                                                               |
| `disabled`             | `false`       | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the menu will be disabled.                                                                                                                                                          |
| `duration`             | `0.2`         | `number \| MotionLifecycleProps<number>`                                                                                                                                                                                                                                                                                                | The animation duration.                                                                                                                                                                        |
| `elements`             | -             | `{ floating?: HTMLElement \| null \| undefined; reference?: HTMLButtonElement \| null \| undefined }`                                                                                                                                                                                                                                   | Object containing the reference and floating elements.                                                                                                                                         |
| `flip`                 | `true`        | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.                                                                                        |
| `gutter`               | `8`           | `number`                                                                                                                                                                                                                                                                                                                                | The distance or margin between the reference and popper. It is used internally to create an `offset` modifier.                                                                                 |
| `initialFocusRef`      | -             | `RefObject<HTMLElement \| null>`                                                                                                                                                                                                                                                                                                        | The `ref` of the element that should receive focus when the popover opens.                                                                                                                     |
| `matchWidth`           | `false`       | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.                                                 |
| `middleware`           | -             | `(false \| { name: string; options?: any; fn: (state: { x: number; y: number; placement: Placement; platform: { detectOverflow: (state: MiddlewareState, options?: DetectOverflowOptions \| Derivable<...> \| undefined) => Promise<...>; } & Platform; ... 4 more ...; elements: Elements; }) => Promisable<...>; } \| null \| und...` | Array of middleware objects to modify the positioning or provide data for rendering.                                                                                                           |
| `offset`               | -             | `[number, number]`                                                                                                                                                                                                                                                                                                                      | The main and cross-axis offset to displace popper element from its reference element.                                                                                                          |
| `onClose`              | -             | `() => void \| Promise<void>`                                                                                                                                                                                                                                                                                                           | Callback invoked to close the element.                                                                                                                                                         |
| `onOpen`               | -             | `() => void \| Promise<void>`                                                                                                                                                                                                                                                                                                           | Callback invoked to open the element.                                                                                                                                                          |
| `onSelect`             | -             | `(value?: string) => void`                                                                                                                                                                                                                                                                                                              | Callback invoked when a menu item is selected.                                                                                                                                                 |
| `open`                 | -             | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the element will be opened.                                                                                                                                                         |
| `openOnClick`          | `true`        | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the popover will be opened when click on the field.                                                                                                                                 |
| `placement`            | `"end-start"` | `Direction`                                                                                                                                                                                                                                                                                                                             | The placement of the popper relative to its reference.                                                                                                                                         |
| `platform`             | -             | `Platform`                                                                                                                                                                                                                                                                                                                              | Custom or extended platform object.                                                                                                                                                            |
| `preventOverflow`      | `true`        | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.                                                                                        |
| `strategy`             | `"absolute"`  | `Strategy`                                                                                                                                                                                                                                                                                                                              | The CSS positioning strategy to use.                                                                                                                                                           |
| `subMenuDirection`     | `"end"`       | `SubMenuDirection`                                                                                                                                                                                                                                                                                                                      | The direction of the sub menu.                                                                                                                                                                 |
| `transferFocus`        | `true`        | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the focus will be transferred to the popover content when the tab key is pressed.                                                                                                   |
| `transform`            | `true`        | `boolean`                                                                                                                                                                                                                                                                                                                               | Whether to use `transform` for positioning instead of `top` and `left` (layout) in the `floatingStyles` object.                                                                                |
| `whileElementsMounted` | -             | `(reference: HTMLButtonElement, floating: HTMLElement, update: () => void) => () => void`                                                                                                                                                                                                                                               | A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass `autoUpdate`). |

### Menu.Anchor

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Menu.Command

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Menu.Content

| Prop          | Default | Type                                                                                                                      | Description                                    |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| `as`          | -       | `keyof IntrinsicElements`                                                                                                 | The HTML element to render.                    |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child.     |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                    |
| `footer`      | -       | `ReactNode`                                                                                                               | The footer of the menu.                        |
| `footerProps` | -       | `MenuFooterProps`                                                                                                         | Props for the footer component.                |
| `header`      | -       | `ReactNode`                                                                                                               | The header of the menu.                        |
| `headerProps` | -       | `MenuHeaderProps`                                                                                                         | Props for the header component.                |
| `items`       | -       | `MenuItem[]`                                                                                                              | If provided, generate elements based on items. |
| `portalProps` | -       | `Omit<PortalProps, "children">`                                                                                           | Props for portal component.                    |

### Menu.Footer

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Menu.Group

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `label`       | -       | `ReactNode`                                                                                                               | The label of the group.                    |
| `labelProps`  | -       | `MenuLabelProps`                                                                                                          | Props for the label component.             |

### Menu.Header

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Menu.Indicator

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Menu.Item

| Prop            | Default | Type                                                                                                                      | Description                                            |
| --------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| `as`            | -       | `As`                                                                                                                      | The HTML element to render.                            |
| `asChild`       | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child.             |
| `css`           | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                        |
| `colorScheme`   | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                            |
| `closeOnSelect` | -       | `boolean`                                                                                                                 | If `true`, the menu item will be closed when selected. |
| `disabled`      | `false` | `boolean`                                                                                                                 | If `true`, the menu item will be disabled.             |
| `value`         | -       | `string`                                                                                                                  | The value of the menu item.                            |

### Menu.Label

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Menu.OptionGroup

| Prop           | Default | Type                                                                                                                                                         | Description                                                            |
| -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
| `as`           | -       | `As`                                                                                                                                                         | The HTML element to render.                                            |
| `asChild`      | -       | `boolean`                                                                                                                                                    | Merges its props onto its immediate child.                             |
| `css`          | -       | `CSSObject \| CSSObject[]`                                                                                                                                   | The CSS object.                                                        |
| `colorScheme`  | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                    | Set color scheme variables.                                            |
| `defaultValue` | -       | `M`                                                                                                                                                          | The initial value of the menu item group.                              |
| `label`        | -       | `string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` | The label of the group.                                                |
| `labelProps`   | -       | `MenuLabelProps`                                                                                                                                             | Props for the label component.                                         |
| `onChange`     | -       | `(value: M) => void`                                                                                                                                         | The callback fired when any children checkbox is checked or unchecked. |
| `type`         | -       | `Y`                                                                                                                                                          | The type of the menu option group.                                     |
| `value`        | -       | `M`                                                                                                                                                          | The value of the menu item group.                                      |

### Menu.OptionItem

| Prop            | Default | Type                                                                                                                      | Description                                            |
| --------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| `as`            | -       | `As`                                                                                                                      | The HTML element to render.                            |
| `asChild`       | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child.             |
| `css`           | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                        |
| `colorScheme`   | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                            |
| `value`         | -       | `string`                                                                                                                  | The value of the menu option item.                     |
| `closeOnSelect` | -       | `boolean`                                                                                                                 | If `true`, the menu item will be closed when selected. |
| `disabled`      | `false` | `boolean`                                                                                                                 | If `true`, the menu item will be disabled.             |
| `icon`          | -       | `ReactNode`                                                                                                               | The icon to be used in the menu option item.           |

### Menu.Separator

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Menu.Trigger

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

## Accessibility

The `Menu` follows the [WAI-ARIA - Menu and Menubar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) and [WAI-ARIA - Menu Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/) for accessibility.

### Keyboard Navigation

| Key              | Description                                                                                                                                             | State                      |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
| `Space`, `Enter` | Opens the menu and focuses the first enabled item.                                                                                                      | -                          |
|                  | Activates the focused item and closes all menus if already within the menu.                                                                             | `closeOnSelect={true}`     |
| `ArrowRight`     | If the focused item is a submenu trigger, opens the submenu and focuses the first enabled item.                                                         | `subMenuDirection="end"`   |
|                  | Closes the submenu and focuses the submenu trigger if already within a submenu.                                                                         | `subMenuDirection="start"` |
| `ArrowLeft`      | If the focused item is a submenu trigger, opens the submenu and focuses the first enabled item.                                                         | `subMenuDirection="start"` |
|                  | Closes the submenu and focuses the submenu trigger if already within a submenu.                                                                         | `subMenuDirection="end"`   |
| `ArrowUp`        | Opens the menu and focuses the last enabled item. Focuses the previous enabled item if already within the menu. If on the first item, focuses the last. | -                          |
| `ArrowDown`      | Opens the menu and focuses the first enabled item. Focuses the next enabled item if already within the menu. If on the last item, focuses the first.    | -                          |
| `Home`           | Focuses the first enabled item if already within the menu.                                                                                              | -                          |
| `End`            | Focuses the last enabled item if already within the menu.                                                                                               | -                          |
| `Escape`         | Closes the menu and focuses the trigger.                                                                                                                | `closeOnEsc={true}`        |

### ARIA Roles and Attributes

| Component             | Roles and Attributes    | Usage                                                                                                                      |
| --------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `Menu.Trigger`        | `role="button"`         | Indicates that it is a button.                                                                                             |
|                       | `aria-controls`         | Set to the related `Menu.Content` `id` when the menu is open, `undefined` when closed.                                     |
|                       | `aria-disabled`         | Set to `"true"` when `disabled` is set.                                                                                    |
|                       | `aria-expanded`         | Set to `"true"` when the menu is open, `"false"` when closed.                                                              |
|                       | `aria-haspopup="menu"`  | Indicates that a menu exists.                                                                                              |
| `Menu.ContextTrigger` | `role="application"`    | Indicates that it is an application.                                                                                       |
|                       | `aria-controls`         | Set to the related `Menu.Content` `id` when the menu is open, `undefined` when closed.                                     |
|                       | `aria-disabled`         | Set to `"true"` when `disabled` is set.                                                                                    |
|                       | `aria-expanded`         | Set to `"true"` when the menu is open, `"false"` when closed.                                                              |
|                       | `aria-haspopup="menu"`  | Indicates that a menu exists.                                                                                              |
| `Menu.Content`        | `role="menu"`           | Indicates that it is a menu.                                                                                               |
|                       | `aria-activedescendant` | Set to the `id` of the focused item.                                                                                       |
|                       | `aria-hidden`           | Set to `"false"` when the menu is open, `"true"` when closed.                                                              |
|                       | `aria-labelledby`       | Set to the `id` of the related `Menu.Trigger` or `Menu.ContextTrigger`.                                                    |
| `Menu.Label`          | `role="presentation"`   | Indicates that it is for presentation.                                                                                     |
| `Menu.Group`          | `role="group"`          | Indicates that it is a group.                                                                                              |
|                       | `aria-labelledby`       | Set to the `id` of the related `Menu.Label`.                                                                               |
| `Menu.Item`           | `role="menuitem"`       | Indicates that it is a menu item.                                                                                          |
|                       | `aria-disabled`         | Set to `"true"` when `disabled` is set.                                                                                    |
| `Menu.OptionItem`     | `role`                  | Set to `"menuitemradio"` when `Menu.OptionGroup` type is `"radio"`, set to `"menuitemcheckbox"` when type is `"checkbox"`. |
| `Menu.Separator`      | `role="separator"`      | Indicates that it is a separator.                                                                                          |