<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

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

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

import { Menu } from "@workspaces/ui"

<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

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

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.

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

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

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

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

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

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>
)

<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>

Right Click Here

<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>

Here display Popover

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.

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.

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>
)

If you use this code, you need to add "use client" to the top of the file.

Change Placement

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

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

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

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

Change Animation

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

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

return (
  <Wrap gap="md">
    <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>
  </Wrap>
)

Change Offset

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

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.

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.

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>
)

If you use this code, you need to add "use client" to the top of the file.

Disable Close on Outside Click

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

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.

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.

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

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>
)

If you use this code, you need to add "use client" to the top of the file.

Props

Menu.Root

Prop	Default	Type / Description
`size`	`"md"`	`"lg" \| "md" \| "sm"` The size of the component.
`animationScheme`	`"scale"`	`"block-end" \| "block-start" \| "inline-end" \| "inline-start" \| "none" \| "scale" ...` 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.1`	`MotionLifecycleProps<number> \| 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"`	`"center-end-end" \| "center-end-start" \| "center-end" \| "center-start-end" \| "center-start-start" \| "center-start" \| "end-center" \| "end-end" \| "end-start" \| "end" ...` 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"`	`"absolute" \| "fixed"` 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 and WAI-ARIA - Menu Button Pattern for accessibility.

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

Element	Roles and Attributes	Usage
`button.ui-menu__trigger`	`role="button"`	Indicates that it is a button.
	`aria-controls`	Set to the related `div.ui-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.
`div.ui-menu__context-trigger`	`role="application"`	Indicates that it is an application.
	`aria-controls`	Set to the related `div.ui-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.
`div.ui-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 `button.ui-menu__trigger` or `div.ui-menu__context-trigger`.
`span.ui-menu__label`	`role="presentation"`	Indicates that it is for presentation.
`div.ui-menu__group`	`role="group"`	Indicates that it is a group.
	`aria-labelledby`	Set to the `id` of the related `span.ui-menu__label`.
`div.ui-menu__item`	`role="menuitem"`	Indicates that it is a menu item.
	`aria-disabled`	Set to `"true"` when `disabled` is set.
`div.ui-menu__item--option`	`role`	Set to `"menuitemradio"` when `Menu.OptionGroup` type is `"radio"`, set to `"menuitemcheckbox"` when type is `"checkbox"`.
`hr.ui-menu__separator`	`role="separator"`	Indicates that it is a separator.

Similar Components

Select is a component used for allowing a user to choose values from a list of options.

Autocomplete is a component used to display suggestions in response to user text input.

NativePopover is a component that floats around an element to display information using the HTML Popover API.

ActionBar is a component that is used to display a bottom action bar with a set of actions.

Popover is a component that floats around an element to display information.

Tooltip is a component that displays short information, such as supplementary details for an element.

Drawer is a component for a panel that appears from the edge of the screen.

Modal is a component that is displayed over the main content to focus the user's attention solely on the information.

Uses Components & Hooks

Popover is a component that floats around an element to display information.

Button is an interactive component that allows users to perform actions such as submitting forms and toggling modals.

Icon is a general icon component that can be used in your projects.

useDescendants is a custom hook that manages descendants.

useDisclosure is a custom hook that helps handle common open/close or toggle scenarios. It can be used to control components such as Modal, Dialog, Drawer, etc.

Used By Components & Hooks

Select is a component used for allowing a user to choose values from a list of options.