Menu

import { Menu } from "@knitui/components";

Usage

Menu.Target wraps the trigger, Menu.Dropdown holds the items. The target keeps its own props — the menu only adds the press handling.

import { Button, Menu } from "@knitui/components";

<Menu>
  <Menu.Target>
    <Button>Actions</Button>
  </Menu.Target>

  <Menu.Dropdown>
    <Menu.Label>Document</Menu.Label>
    <Menu.Item onPress={rename}>Rename</Menu.Item>
    <Menu.Item onPress={duplicate}>Duplicate</Menu.Item>
    <Menu.Divider />
    <Menu.Item theme="red" onPress={remove}>
      Delete
    </Menu.Item>
  </Menu.Dropdown>
</Menu>;

Uncontrolled by default. Pass opened + onChange to control it, or use defaultOpened for the initial state only.

Items take leftSection / rightSection for icons and shortcut hints. A menu is for actions; if the dropdown is for choosing a value, you want a select.

Positioning goes through the kit's own floating engine: position, offset and the arrow* props behave the same as on Popover.

When to use something else

• Choosing a value from a list → Select or Combobox
• Rich anchored content rather than a list of commands → Popover
• A label that appears on hover → Tooltip

Examples

Props

Style slots

Every part of Menu can be styled through the styles prop. Explicit props on the component always win over slot styles.

Accessibility

Menu implements the ARIA menu-button pattern. The dropdown is a role="menu", each item a role="menuitem", and focus is managed: opening moves focus to the first item, Tab is trapped inside the dropdown, and closing returns focus to the trigger.

Items are reached with the arrow keys — roving focus — so they stay out of the page's tab order rather than adding one tab stop per menu entry.

Disabled items are skipped by arrow navigation and are never focused.

Hover menus deliberately do not manage focus. With trigger="hover" or "click-hover", opening the menu does not take focus and closing it does not move focus to the trigger — a menu you opened by pointing at something never had focus, so "returning" it would move the caret somewhere you never put it. Keyboard users reach a hover menu the same way as any other: by pressing or arrowing on the trigger. Override with trapFocus / returnFocus if your case differs.

• loop={false} stops arrow focus wrapping at the ends.
• menuItemTabIndex={0} additionally makes every item a Tab stop. Rarely wanted — the arrow keys are the menu pattern — but useful if you are using Menu as a plain list of links.
• Give an icon-only trigger an accessible name (aria-label on the target, or use ActionIcon, which is built for it).