dowel
Menu

Components

Menu

A compact action surface with groups, shortcuts, selection, nested menus, keyboard navigation, and typeahead.

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 "@karnstack/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>

Checks and radio choices

Checkbox items toggle independent settings. Radio items choose one value from a group. Indicators occupy the same leading slot as Menu.Icon, while Menu.Shortcut aligns supporting keys at the far edge.

tsx
<Menu.Popup>
  <Menu.CheckboxItem defaultChecked>
    <Menu.CheckboxItemIndicator>✓</Menu.CheckboxItemIndicator>
    Show archived
    <Menu.Shortcut>⇧ A</Menu.Shortcut>
  </Menu.CheckboxItem>
  <Menu.Separator />
  <Menu.RadioGroup defaultValue="compact">
    <Menu.RadioItem value="compact">
      <Menu.RadioItemIndicator>•</Menu.RadioItemIndicator>
      Compact
    </Menu.RadioItem>
    <Menu.RadioItem value="comfortable">Comfortable</Menu.RadioItem>
  </Menu.RadioGroup>
  <Menu.Separator />
  <Menu.Item tone="danger">Delete project</Menu.Item>
</Menu.Popup>

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.