Dropdowns — DrumKit

Demo

Every dropdown here is live: click a trigger to open its menu, and use the picker to cycle the ready-made compositions the source directory ships.

Composition

import { DropdownButtonSimple } from "@/components/base/dropdown/dropdown-button-simple"; <DropdownButtonSimple />

The snippet is the whole composition

Each composition is a zero-prop component, so the copied element reproduces the preview exactly. They are starting points: copy the nearest one into your feature and edit its menu. The compound Dropdown.* API underneath lives on the Code tab.

The family

8 parts from one module. Root wires a trigger to a popover, the popover holds a menu, and the menu holds sections, items, and separators.

The components in this family, with their descriptions and import paths
Component	Description	Import from
Dropdown.Root	React Aria’s MenuTrigger: wraps the trigger element and the popover, and wires them together.	`@/components/base/dropdown/dropdown`
Dropdown.Popover	The floating panel: 248px wide by default, placed bottom right, sized and repositioned via className and placement.	`@/components/base/dropdown/dropdown`
Dropdown.Menu	The menu list: owns selectionMode, selectedKeys, onSelectionChange, onAction, and disabledKeys.	`@/components/base/dropdown/dropdown`
Dropdown.Section	Groups related items, and can own its own selection state independent of the menu’s.	`@/components/base/dropdown/dropdown`
Dropdown.SectionHeader	A heading inside a section; the section’s accessible name wires to it automatically.	`@/components/base/dropdown/dropdown`
Dropdown.Item	One menu row: label, leading icon or avatar, trailing addon text, and a selection indicator.	`@/components/base/dropdown/dropdown`
Dropdown.Separator	A 1px horizontal rule between groups of items.	`@/components/base/dropdown/dropdown`
Dropdown.DotsButton	A prebuilt vertical-dots icon trigger with a built-in aria-label.	`@/components/base/dropdown/dropdown`

Item forms

What one row can carry: a plain label, a leading icon, avatar, status dot, or product logo, an inset that keeps mixed menus aligned, trailing addon text, and section headers between groups. Two-line account rows compose from the same API, and below them sit the header and footer blocks a menu wraps itself in. These menus render standalone, without a popover, so every row is visible at once; they are still live, so hover, selection, and arrow keys paint the kit’s own treatments.

plain, addon, disabled

leading icons

avatars

sections, header, separator

status dots

product logos

mixed rows, inset alignment

account rows, section-owned radio

account rows, two-line

Submenus live in the compositions

A submenu needs a real popover tree, so it cannot render in these standalone panels: open DropdownButtonSimple in the demo above and hover View details to see one, with SubmenuTrigger imported from react-aria-components wrapping the trigger row and its popover.

Headers and footers

header: avatar group

header: search (type to filter)

header: heading and supporting text

Heading

Supporting text

footer: button

footer: text

v1.0.0

Patterns, not parts

No header or footer is a Dropdown.* export: each is a bordered div beside the menu. Three cells mirror composition markup exactly, the avatar-group header and sign-out footer from DropdownAvatar and the search header from the search pair. The heading-with-supporting-text header and the text footer ship in no composition yet, so those 2 cells are the blessed pattern, measured from the sheet’s header and footer sets; the ruling that settled them, and the rest of the item-forms audit, is recorded on the Code tab.

Selection indicators

The 4 indicator forms plus none, mirroring the selectionIndicator union. Selection here is real state: click rows and the kit moves its own checks, boxes, dots, and switches. With a leading icon or avatar the indicator renders trailing instead of leading, read from the kit source.

checkmark, single

checkbox, multiple

radio, single section

toggle

Trigger compositions

All 14 trigger compositions from the sheet’s Type axis, every one live: click to open. The simple and advanced pairs share a trigger and differ in the menu behind it, and the account family steps from a bare avatar up to the full md card.

DropdownButtonSimple: A labeled button trigger with sections and a submenu

DropdownButtonAdvanced: The same button trigger, the fully loaded menu

DropdownButtonLink: A text trigger showing the current value

DropdownIconSimple: The dots-icon trigger, the same menu

DropdownIconAdvanced: The dots-icon trigger over the loaded menu

DropdownSearchSimple: A searchable multi-select menu

DropdownSearchAdvanced: The searchable picker with grouped rows

DropdownIntegration: Items carrying product logos

DropdownAccountButton: A labeled button opening the account menu

DropdownAvatar: An avatar trigger with an account header and footer

DropdownAccountCardXS: The smallest account card: avatar and name

DropdownAccountCardSM: A mid account card with a presence dot

DropdownAccountCardMD: A full account card trigger with workspace switching

DropdownAccountBreadcrumb: A compact account switcher for breadcrumbs

States

Selected and disabled are forced through real props below. Hover and keyboard focus cannot be forced from outside, because the kit exports no style object to borrow classes from, so this menu stays live instead: hover a row or Tab into it and arrow around, and what you see is the kit’s own painting.

rest, selected, disabled

hover and focus, live

A submenu leaves its parent row unpainted

Measured: while a submenu is open, the parent row carries data-open but the kit styles only hover and focus, so the row loses its highlight once focus moves into the submenu. The Figma sheet’s Open variant keeps the hover background; the kit as shipped does not.