Components

Dropdown

Menu built on React Aria's Menu/Popover - icon items, sections with a separator, and a swappable selection indicator (checkmark, checkbox, radio, or toggle) for multi/single-select menus.

Actions menu

The default shape - an icon, a label, nothing selectable. This is exactly what TableRowActionsDropdown on the Table page is built from.

Actions

Sections

Dropdown.Section plus Dropdown.SectionHeader groups related items - e.g. account actions separated from a sign-out action.

Grouped

Selection indicators

Set selectionMode on Dropdown.Menu and pass a selectionIndicator to each item - "checkmark" (default), "checkbox", "radio", or "toggle". Each one reuses the real base component (CheckboxBase, RadioButtonBase, ToggleBase) rather than a lookalike.

Checkmark (default) / Checkbox / Radio / Toggle

With avatar

Pass avatarUrl instead of icon for a people-picker style menu - the selection indicator moves to the trailing edge automatically. The avatar falls back to initials when the image 404s, same as the base Avatar component.

Assignee picker

Usage

import { Edit01, Copy01, Trash01 } from "@untitledui/icons";
import { Dropdown } from "@/components/base/dropdown/dropdown";

<Dropdown.Root>
  <Dropdown.DotsButton />
  <Dropdown.Popover className="w-56">
    <Dropdown.Menu>
      <Dropdown.Item icon={Edit01} label="Edit" />
      <Dropdown.Item icon={Copy01} label="Copy link" />
      <Dropdown.Separator />
      <Dropdown.Item icon={Trash01} label="Delete" />
    </Dropdown.Menu>
  </Dropdown.Popover>
</Dropdown.Root>

API

Component	Notes
`Dropdown.Root`	React Aria MenuTrigger - wraps a trigger element and the Popover.
`Dropdown.DotsButton`	Ready-made vertical-dots trigger button. Use any AriaButton-compatible element instead if you need a different trigger.
`Dropdown.Popover`	React Aria PopoverProps. className sets width, e.g. "w-56".
`Dropdown.SubmenuPopover`	The popover of a submenu (inside a React Aria SubmenuTrigger). It tucks against the parent menu and lines its first row up with the row that opened it, as a macOS or iOS menu does (offset -2, crossOffset -5, placement "end top"); the row that opened it stays highlighted while the submenu is open. Same props as Dropdown.Popover; className sets width.
`Dropdown.Menu`	React Aria MenuProps - selectionMode, selectedKeys/defaultSelectedKeys, onSelectionChange.
`Dropdown.Item`	label, icon, avatarUrl, addon (trailing text), selectionIndicator ("checkmark" reserves a left column for the tick \| "checkmark-end" ticks after the label, only on what is on, reserving nothing \| "checkbox" \| "radio" \| "toggle" \| "none"), unstyled (opt out of default styling for a fully custom row), destructive (error-coloured label, icon and hover, for delete or remove; put it last, after a Dropdown.Separator).
`Dropdown.Section / SectionHeader`	React Aria MenuSection/Header - groups items under a label.
`Dropdown.Separator`	Hairline divider between items or sections.