Skip to content
Components
/
Dropdown
Dark

Dropdown

Dropdown opens a short list of options, anchored to the control that opened it.

Preview

A menu anchored to a trigger. Press the label to open it. Past about six options on a phone, use Action Sheet or Picker instead.

DropdownMenu, State Close then Open
trigger 44 tall, menu 300 x 296
Dropdown title

Closed, the trigger has no fill at all. Open, it takes bg/soft-100 and the caret flips from down to up. 296 is arithmetic: 12 of padding, the 32 title, four 56 rows, four 4 gaps, 12 again. The label does not move while that happens: in the file the open menu is positioned absolutely inside the component, so the trigger measures 106 by 44 either way, and here the wrapper is held at the menu's own 300 so the label keeps its left edge.

Option

The building block behind every row, not for direct use. Four states, three of them just a fill. Checked adds a brand tick on the right.

State Default, Active, Pressed, Checked
276 x 56, radius 18, padding 6 and 16, gap 12
Defaultbg/white-0Activebg/weak-50Pressedbg/soft-100Checkedbg/white-0 plus a tick

Pressed is darker than Active here, the reverse of Context Menu, where Pressed takes bg/weak-50. The title and description sit at gap 0, so 24 over 20 fills the 44 the row leaves after its padding.

Only Popover

The second axis drops the trigger and ships the menu alone, for anchoring to something the component does not own: an icon button, a row, a long press.

Only Popover True
300 x 296, no trigger above it
Dropdown title
Dropdown optionDescriptionDropdown optionDescriptionDropdown optionDescriptionDropdown optionDescription

Only three of the four axis pairs exist. A closed popover would be nothing on screen, so the file does not draw it.

Properties

Two axes and a boolean on the published component, four more on the option inside it.

Property
Type
Default
State
Open | Close
Close
Only Popover
False | True
False
Title
Boolean
true
Title Text
Text
Dropdown title
State
Default | Active | Pressed | Checked, on the option
Default
Icon, Description
Booleans, on the option
true
Icon Swap
Instance swap, on the option
circle

DropdownMenu ships 3 variants, not 4: a closed popover would be nothing on screen. The option ships 4 and is composed four times into each open menu.

Tokens

Every value the component reads, resolved through its aliases to the Foundations primitive.

Token
Light
Dark
Applied to
bg/white-0
#FFFFFF
#0E0E0F
Menu surface, and the option at rest
border/soft-100
#E9E9EA
#2F2F31
1px inside stroke on the menu
bg/soft-100
#E9E9EA
#48484A
Open trigger, and the pressed option
bg/weak-50
#F4F5F5
#242427
Active option
text/sub-700
#48484A
#C7C7CC
Trigger label
text/strong-950
#0E0E0F
#FFFFFF
Option title
text/soft-500
#8E8E93
#AEAEB2
Menu title and option description
fg/soft-500
#8E8E93
#AEAEB2
Caret and option icon
brand/base
#155DFC
#2B7FFF
The tick on Checked

The shadow is the effect style dropShadow/md: 0 10 15 at minus 3 on black at 5 percent, over 0 4 6 at minus 4 on black at 8 percent. Geometry runs on dimensions/radius/lg 12 for the trigger, dimensions/radius/2xl 24 for the menu and dimensions/radius/xl 18 for the option, with the trigger height on dimensions/spacing/11 44.

Guidelines

Do
Sort by
NewestPrice

Keep it to a handful of options and let the title say what the list is for. Checked marks the current choice, so the menu answers its own question.

Don't
AfghanistanAlbaniaAlgeria

Do not use it for a long list. Past about six options on a phone the component's own description sends you to Action Sheet or Picker.

The menu is anchored to its trigger, so it opens where the finger already is. If the thing being chosen has no trigger on screen, that is Only Popover, not a dropdown with an invisible button.