Dropdown

Preview

A menu anchored to a trigger. Press the label to open it, press an option to choose it and press Escape to close it.

Closed, the trigger has no fill; open, it takes bg/soft-100 and the chevron turns up. With a title and four rows the menu is 300 wide and 296 tall.

The menu is a floating surface on bg/raised, white in Light and #242427 in Dark, with a 1 pt edge and dropShadow/md.

The menu title and the option descriptions are text/soft-500, #8E8E93, which measures 3.26 to 1 on white and 2.99 to 1 on the Active row, under the 4.5 to 1 that WCAG asks of small text.

In code, give the trigger a visible focus ring, move focus into the menu when it opens and back to the trigger when it closes, and let the arrow keys move between rows. The trigger is 44 tall and a row 56: both clear the 44 pt iOS minimum, and the trigger needs 4 dp more hit area on Android.

Which states does a Dropdown option have?

Four: Default, Active, Pressed and Checked. The option is the building block behind every row, and Checked adds a brand check after the text.

Pressed is darker than Active, the reverse of Context Menu where Pressed takes bg/weak-50. On a pointer, hovering a row shows Active and pressing it shows Pressed.

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.

A closed popover would be nothing on screen, so the file draws three of the four State and Only Popover pairs.

When should I use a Dropdown?

Use a Dropdown for a short list of up to about six options that belong to one trigger. For a longer list on a phone, use Action Sheet or Picker.

A dropdown keeps the choice next to the control that asked for it, so the person never loses the screen behind it. Checked marks the current choice.

When the thing being chosen has no trigger on screen, use Only Popover rather than a dropdown with an invisible button. When the list is long or needs a search, a Picker or an Action Sheet is faster to scan with a thumb.

How does Dropdown differ on iOS and Material 3?

iOS draws a menu as a narrow glass panel at radius 32 and Material 3 has no menu in the file. Appetite UI draws a 300 wide surface at radius 24 with a title row and rows 56 tall.

The 56 option row clears both minimums in platform/min-touch-target, 44 pt on iOS and 48 dp on Android; the 44 trigger clears iOS, so add 4 dp of hit area on Android. Read Platform Bridge for how one screen switches between the two, and iOS for the platform mirrors.

Properties

Two variant properties, a boolean and a text on the menu, and six properties on the option inside it, each with its options from the component definition.

DropdownMenu ships 3 variants. The option ships 4 and is composed four times into each open menu. Source: DropdownMenu and _Dropdown Option of the Appetite UI Figma file, read on October 2, 2026.

Tokens

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

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. The menu radius is 24, the option and trigger radius 12, and the trigger height 44.

Guidelines

Make the trigger say what is chosen, because the menu closes after a pick and the component has no value slot of its own.