Dropdown

Molecule

The floating panel that holds one or more Options rows. Use it as the open state of a select, combobox, or menu trigger. Panel chrome is Figma-exact (node 144-1623): 8px rounded corners, 1px border, Shadow-3 drop, 4px inner padding, 8px gap between rows. Composes with Tag chips in the trailing slot.

When to use

✅ Do

Use when the user needs to select from a list of 7 or more options
Use to conserve vertical space when Radio Buttons would take too much room
Use for contextual actions (right-click menus, overflow menus with 3+ actions)
Use alongside a Text Input or Button as the trigger that opens the panel
Use composition with Tag chips in the trailing slot for metadata labels

❌ Don't

Use for fewer than 4 options — show them as Radio Buttons instead
Use for navigation between pages — use Tabs or Links instead
Use without a visible trigger — the panel must always be attached to a trigger element
Nest dropdowns inside dropdowns — maximum one level of depth
Use for destructive actions without a confirmation step

DigiLawyer Patterns

No additional product-specific patterns for Dropdown. Note that .dropdown is a direct alias of .options-menu — they are identical and interchangeable.

Anatomy

A Dropdown is a floating panel wrapping one or more Options rows. The panel itself has no interactive state — it is shown or hidden by the trigger element.

1Panel — .dropdown / .options-menu. Floating container with border, shadow, and inner padding. Positioned by JS relative to its trigger.
2Options rows — One or more .options items. Each row has up to three slots: leading icon, label, and trailing icon/tag.
3Active row — .options-active. Highlights the currently hovered or keyboard-focused row.
4Trigger — Not part of the component. A Button, Text Input, or any focusable element that opens/closes the panel.

Default

A .dropdown wraps any number of .options rows. Each row is the canonical Options pattern: leading icon · label · trailing chevron + .tag.tag-grey.tag-outline chip. Set role="listbox" on the panel and role="option" on each row.

HTML

<div class="dropdown" role="listbox" aria-label="…">
  <button type="button" class="options" role="option">
    <span class="options-leading"><svg>…</svg></span>
    <span class="options-label">Options</span>
    <span class="options-trailing">
      <svg>…</svg>
      <span class="tag tag-grey tag-outline tag-sm">Label</span>
    </span>
  </button>
  …
</div>

Sizes

Per Figma, the Dropdown has 10 size variants — 1 row through 10 rows. There's nothing structural to do for each: just stack more .options children. The panel grows linearly (~52px per row at default md size: 40px row + 8px gap + 4px outer padding split). When the option count would push the panel past the viewport, scroll the panel — never collapse the rows.

1 option

2 options

3 options

5 options

10 options

Composition

The panel doesn't care what's inside the rows — the Options component drives the per-row appearance. Common compositions: mix Tag colors to convey status, use a leading checkmark for a single-select list, or drop down to .options-sm rows for a compact toolbar menu.

Accessibility

Follows the WAI-ARIA Listbox pattern for select dropdowns, or the Menu pattern for action menus.

Attribute / Behaviour	Value	Notes
Panel role	`listbox` or `menu`	Use `listbox` for selection; `menu` for actions
Trigger attribute	`aria-expanded="true/false"`	Set on the trigger element to communicate open/closed state to screen readers
Trigger attribute	`aria-haspopup="listbox"`	Tells assistive tech that this trigger opens a popup
Keyboard — open	`Enter` / `Space` / `↓`	Opens the dropdown from the trigger
Keyboard — navigate	`↑` `↓`	Moves focus between options rows
Keyboard — select	`Enter`	Selects the focused option and closes the panel
Keyboard — close	`Esc`	Closes the panel and returns focus to the trigger
Click outside	Closes panel	Clicking outside the panel must close it and return focus to the trigger

API

Class / attr	On	Description
.dropdown	<div role="listbox">	Panel wrapper. White surface, 1px border, `--shadow-3` drop shadow, `--radius-md` (8px) corners, 4px inner padding, 8px gap between rows. Width is consumer-driven (set `width` or `min-width` on the element).
.options-menu	<div>	Alias for `.dropdown`. Kept for backward compatibility — the two render identically. New code should prefer `.dropdown`.
(child) .options	<button role="option">	Each row inside the dropdown. See Options for the full API (sizes, slots, states).
role="listbox"	wrapper	Recommended ARIA role for the panel. Pair with `aria-label` describing what the menu controls.
role="option"	row	Recommended ARIA role for each item. Pair with `aria-selected="true"` on the active row.