USER INTERFACE · MENUS

Dropdowns

Menus, selects and pickers. Every one opens, works with ↑ ↓ Enter Esc, and closes when you click outside.

THEME

DENSITY

Playground

Build your dropdown — compare with the default

PREVIEWclick · ↑ ↓ Enter Esc3 differences

Open it with the mouse or Tab + Enter

Settings

TRIGGER

default: Button

PLACEMENT

default: Bottom left

WIDTH

default: Auto

DIFF FROM DEFAULT

~ trig: Avatar~ place: Bottom right+ heads: group headers

Menu anatomy

Every kind of row

Item36 px · padding 8/10 · radius 9 · 13/600

Icon18 px column, muted

Shortcutmono 11 px, right

Description11.5 px muted, 2nd line

Header10 px · 900 · tracking .14em

Separator1 px w07 · margin 5/6

Panelpadding 6 · radius 14 · shadow 0 18 44

Types

Action, select, multi, combobox, nested, toggles

Action menu⋯ · icons · shortcuts · danger

Spring 27 campaign

Choose an action

Selectone value · search

Multi-selectcheckboxes · Clear / Apply

CampaignVideo

Comboboxtype to filter · create new

Try “Nor”, or a new name like “Atlas”

Nested menuMove to › submenu

Hover “Move to” to open the submenu

Toggle itemsswitches don’t close the menu

weekends · 24 h

Rich dropdowns

User, notifications, date, colour, people

User menuavatar · plan · theme

Notificationsunread · mark all read

Date pickercalendar in a dropdown

Colour pickerlabel colour

Retouch

People pickermulti · load

In Avava

Filter, client, project switcher, + New

Table filterstatus · counts · filters rows

All 6 invoices

AV-041Nordic ThreadOverdue

AV-042Fjord OutdoorSent

AV-039Kaya CeramicsPaid

AV-043Lumen CoffeeDraft

AV-040Kaya CeramicsOverdue

Invoice clientselect · search · logos

Changing the client updates the address and VAT on the invoice.

Project switchertopbar · recent

AVAVA/

Quick create+ New

Rules & a11y

Keyboard, attributes, mobile

Keyboard

↓↑Move between items (wraps)

EnterChoose the highlighted item

EscClose and return focus to the trigger

HomeEndFirst / last item

A–ZJump to the next item starting with that letter

TabClose and move on

Attributes

Triggeraria-haspopup="menu" aria-expanded="true"

Menurole="menu" aria-activedescendant="dd-act-2"

Itemsrole="menuitem" · menuitemcheckbox · option (listbox)

Disabledaria-disabled="true" + title with the reason

Comboboxrole="combobox" aria-autocomplete="list"

Open any menu, press Esc — focus goes back to its trigger.

On mobile → bottom sheet

375 px

✎ Rename⧉ Duplicate↗ Share with client🗑 Delete

Below 600 px the same items open as a sheet with 44 px rows.

Dropdown menuA list of actions on something.Edit, Duplicate, Delete

SelectPick one value for a field.Status, client, currency

PopoverRich content tied to a trigger.Date picker, colour, people

ModalA task that needs full attention.Delete project, invite team

DO✓Put the most used action first✓Use a verb for every action✓Group with headers and separators, max ~8 items per group✓Explain disabled items with a tooltip✓Return focus to the trigger on close

DON’T✕Hide the only way to do something in a menu✕Nest submenus more than one level✕Put destructive actions at the top✕Use a dropdown for 2 options — use a toggle✕Let a menu go off-screen — flip it