role disclosure

Dropdown draft v0.4.1

A button that opens a menu of related actions.

A dropdown gathers actions that relate to one purpose (share, export, more actions on a row) behind a single button, and shows them in a menu when the button is activated. Activating an action closes the menu. The trigger is the Button component, so it takes every emphasis, intent and size of the button. A dropdown offers actions: choosing a value is the Select component, and a button whose main action sits next to its menu is the Split button component.

Decisions

From decisions in packages/components/specs/components/dropdown.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.

Color

The menu is a level 2 surface wherever it opens: its background is global.bg.level.2.default, its outline global.border.level.edge.level.2 and its separators global.border.level.on-level.2. Items alias the Figma library's mapped roles as they are (neutral and functional.error families, subtle tints on hover and press), in light and dark mode.

menu-level-2-figma-library · 2026-10-02 · v0.4.0 · replaces menu-level-2

dropdown.menu.backgrounddropdown.menu.border-colordropdown.separator.colordropdown.item.background.*dropdown.item-label.color.*

Accessibility

The dropdown is accessible in every state without relying on code the consumer has to write. On the web, the reference implementation works without any script: the trigger opens a native popover and the menu follows the disclosure pattern, items being buttons and links reached with Tab, never an ARIA menu.

Accessible at all cost, all the time; the web implementation ships CSS and HTML only.

no-script-disclosure · 2026-10-01 · v0.1.0

dropdown.menu.*

APG: Disclosure pattern, roles, states and properties APG: Read me first, no ARIA is better than bad ARIA (a role is a promise)HTML: the popover attribute (a custom menu still needs author scripting)HTML-AAM: popovertarget attribute (aria-expanded)

Anatomy

Menu items can have a leading icon, can be disabled, and can take the error intent for destructive actions; separators split the menu into groups of items.

item-features · 2026-10-01 · v0.1.0

dropdown.item.*dropdown.item-label.*dropdown.item-icon.*dropdown.separator.*
The dropdown is made of its trigger and its opened menu: the menu, its groups, items and separators are parts of the component, with states of their own next to the trigger's.

anatomy-opened · 2026-10-01 · v0.1.0

Variant

The trigger is the Button component with all its options (emphasis, intent, size, leading icon, disabled) and its defaults, and a chevron as its trailing icon.

trigger-is-button · 2026-10-01 · v0.1.0

button.*

Behaviour

A dropdown opens a menu of actions. Choosing a value is a separate component (Select), and so is a button whose main action sits next to its menu (Split button).

scope-actions · 2026-10-01 · v0.1.0

Superseded (1)

~~The menu is a level 2 surface wherever it opens: its background is color.surface.level.2, its outline color.border.edge.level.2 and its separators color.border.on-level.2.~~

menu-level-2 · 2026-10-02 · v0.3.0 · replaced by menu-level-2-figma-library