Menu v0.1.0 Overlay

Dropdown action menu (WAI-ARIA menu pattern): roving focus, Home/End, Escape, outside-click dismissal.

import { Menu } from "latticeui-react";

Examples

Action menu

Arrow keys move focus, Enter selects, Escape closes and refocuses the trigger.

Show code

<Menu.Root>
  <Menu.Trigger>Actions</Menu.Trigger>
  <Menu.Content>
    <Menu.Item onSelect={() => rename()}>Rename</Menu.Item>
    <Menu.Item onSelect={() => duplicate()}>Duplicate</Menu.Item>
    <Menu.Separator />
    <Menu.Item danger onSelect={() => remove()}>Delete</Menu.Item>
  </Menu.Content>
</Menu.Root>

With group labels

Show code

<Menu.Root placement="bottom-end">
  <Menu.Trigger>Workspace</Menu.Trigger>
  <Menu.Content>
    <Menu.GroupLabel>Switch to</Menu.GroupLabel>
    <Menu.Item>Acme Corp</Menu.Item>
    <Menu.Item>Personal</Menu.Item>
    <Menu.Separator />
    <Menu.Item>Create workspace...</Menu.Item>
  </Menu.Content>
</Menu.Root>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`trigger`	`button`	`[data-scope="menu"][data-part="trigger"]`
`positioner`	`div`	`[data-scope="menu"][data-part="positioner"]`
`content`	`div[role=menu]`	`[data-scope="menu"][data-part="content"]`
`item`	`button[role=menuitem]`	`[data-scope="menu"][data-part="item"]`
`separator`	`div`	`[data-scope="menu"][data-part="separator"]`
`groupLabel`	`div`	`[data-scope="menu"][data-part="groupLabel"]`

Props

Prop	Type	Default	Description
`Root.placement`	`Placement (floating-ui)`	`"bottom-start"`
`Root.onOpenChange`	`(open: boolean) => void`	—
`Item.onSelect`	`() => void`	—	Menu closes automatically after selection.
`Item.danger`	`boolean`	—

Accessibility

Roles: menumenuitem

Key	Action
`ArrowDown/ArrowUp`	move focus (wraps)
`Home/End`	first/last item
`Enter`	selects item
`Escape`	closes and refocuses trigger

First enabled item is focused when the menu opens.

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="menu"][data-part="item"] {
  /* your overrides */
}

State attributes: data-danger