Dropdown

An action menu — from data in one line, or composed with checkbox items, radio groups and submenus.

<Dropdown><Dropdown.Trigger render={<Button iconEnd={IconChevronDown}>Actions</Button>} /><Dropdown.Content>  <Dropdown.Item icon={IconPencil} shortcut={<Kbd>R</Kbd>}>Rename</Dropdown.Item>  <Dropdown.Item icon={IconCopy}>Duplicate</Dropdown.Item>  <Dropdown.Separator />  <Dropdown.Item destructive icon={IconTrash}>Delete</Dropdown.Item></Dropdown.Content></Dropdown>

Dropdown is a menu of actions anchored to a trigger. Rows are 20px-guttered so icons, check marks and radio dots all line up, whatever a given menu mixes.

It does not lock the page. modal defaults to false, which is not Base UI's default: a menu is a list of things you might not do, and freezing the application behind one feels broken — and if the unlock ever misses, it stays broken.

Usage

tsx

import { Button, Dropdown } from "@heyo-sh/heyo-ui";<Dropdown>  <Dropdown.Trigger render={<Button>Actions</Button>} />  <Dropdown.Content>    <Dropdown.Item onClick={rename}>Rename</Dropdown.Item>  </Dropdown.Content></Dropdown>;

From data

items builds the whole menu — rows, separators and titled sections — from an array. The string "separator" is a rule; an entry with items is a section.

<Dropdown><Dropdown.Trigger render={<Button shape="square" icon={IconAdjustments} aria-label="Options" />} /><Dropdown.Content  items={[    { label: "Workers", items: [{ label: "Restart" }, { label: "View logs" }] },    "separator",    { label: "Delete project", destructive: true },  ]}/></Dropdown>

Checkbox and radio items

A menu is also where small, immediate settings live. Radio items draw their own dot on the same 20px gutter the checkbox items use, so a mixed menu stays aligned.

<Dropdown><Dropdown.Trigger render={<Button iconEnd={IconChevronDown}>View</Button>} /><Dropdown.Content>  <Dropdown.Label>Columns</Dropdown.Label>  <Dropdown.CheckboxItem defaultChecked>Status</Dropdown.CheckboxItem>  <Dropdown.CheckboxItem>Region</Dropdown.CheckboxItem>  <Dropdown.Separator />  <Dropdown.RadioGroup defaultValue="24h">    <Dropdown.RadioItem value="1h">Last hour</Dropdown.RadioItem>    <Dropdown.RadioItem value="24h">Last 24 hours</Dropdown.RadioItem>  </Dropdown.RadioGroup></Dropdown.Content></Dropdown>

Submenus

<Dropdown><Dropdown.Trigger render={<Button>Deploy</Button>} /><Dropdown.Content>  <Dropdown.Item>Deploy now</Dropdown.Item>  <Dropdown.Sub>    <Dropdown.SubTrigger icon={IconWorld}>Region</Dropdown.SubTrigger>    <Dropdown.SubContent>      <Dropdown.Item>Frankfurt</Dropdown.Item>      <Dropdown.Item>Warsaw</Dropdown.Item>    </Dropdown.SubContent>  </Dropdown.Sub></Dropdown.Content></Dropdown>

Menu, list, or palette?

Dropdown is for actions. Select is for choosing a value, Combobox when that list needs filtering, and Command when the answer is "anything in the application".

Properties

modalbooleanoptional

Whether the open menu locks the page. It defaults to false, unlike Base UI.

openbooleanoptional

Controlled state. Pair it with onOpenChange.

defaultOpenbooleanoptional

Open on first render.

onOpenChange(open: boolean) => voidoptional

Fires on open and close.

Dropdown.Content

itemsDropdownEntry[]optional

Shorthand. An entry is a row (label, icon, shortcut, destructive, disabled, onClick), the string "separator", or a section (label plus nested items).

side"top" | "right" | "bottom" | "left"optional

Preferred placement. It flips when there is no room.

align"start" | "center" | "end"optional

Alignment against the trigger. It defaults to start.

sideOffsetnumberoptional

Gap between the trigger and the menu, in pixels. It defaults to 4.

positionerMenu.Positioner.Propsoptional

Escape hatch for anything else the positioner supports.

Dropdown.Item

iconIconLikeoptional

The leading glyph.

shortcutReactNodeoptional

A right-aligned hint, usually a Kbd.

destructivebooleanoptional

Red styling for an irreversible action.

disabledbooleanoptional

Dims the row and ignores interaction.

onClick() => voidoptional

Runs when the row is chosen.

The rest

Dropdown.Triggerrenderoptional

Anything that opens the menu. Pass render={<Button />} to use a button.

Dropdown.CheckboxItemchecked, onCheckedChangeoptional

A togglable row with a check mark in the gutter.

Dropdown.RadioGroup / RadioItemvalue, onValueChangeoptional

A single choice. The dot is drawn by heyo-ui, on the checkbox gutter.

Dropdown.Group / Label / Separator—optional

A titled section, its heading, and a rule.

Dropdown.Sub / SubTrigger / SubContent—optional

A nested menu. SubContent takes the same props as Content.

Loading documentation…