dowelunreleased

Components

Menu

A dropdown on the popover elevation tier. Keyboard navigation, typeahead and highlight management come from Base UI.

Anatomy

The highlighted item is styled through data-highlighted rather than :hover, so the mouse and the keyboard produce exactly the same state — arrow down and hover cannot disagree.

tsx
import { Button, Menu } from "dowel";

<Menu.Root>
  <Menu.Trigger render={<Button>Open menu</Button>} />
  <Menu.Portal>
    <Menu.Positioner>
      <Menu.Popup>
        <Menu.Item>Duplicate</Menu.Item>
        <Menu.Item>Rename</Menu.Item>
        <Menu.Item disabled>Move to…</Menu.Item>
      </Menu.Popup>
    </Menu.Positioner>
  </Menu.Portal>
</Menu.Root>

Groups and separators

Group and GroupLabel name a run of related items; Separator is the hairline between runs. Use one or the other — a labelled group that also has a rule above it is saying the same thing twice.

tsx
<Menu.Popup>
  <Menu.Group>
    <Menu.GroupLabel>This project</Menu.GroupLabel>
    <Menu.Item>Duplicate</Menu.Item>
    <Menu.Item>Archive</Menu.Item>
  </Menu.Group>
  <Menu.Separator />
  <Menu.Item>Delete</Menu.Item>
</Menu.Popup>

Menu.Positioner defaults to a 4px sideOffset. It is set before the prop spread, so it is a default you can override, not a mandate.