App switcher dropdown

Updated 2026-05-19

Overview Content Accessibility Code

Confidence anatomy medium variants medium motion high a11y high content low

Overview

Menu: -4 Density Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

🛠 Additional options Menu list item - can be edited by selecting individual list item and selecting wether it is enabled, selected, and has a divider from the variant properties.

Anatomy

Anatomy diagram coming from Figma

1. 1
   Container

   the navigation region — typically a landmark role (nav/banner)
2. 2
   Items

   individual navigable entries; one is marked "current" when applicable
3. 3
   Item label

   short, scannable text; never sentence case
4. 4
   Item icon (optional)

   reinforces meaning at a glance; not a substitute for label
5. 5
   Active indicator

   visual treatment for the current item — underline, bar, fill, or background
6. 6
   Trigger (optional)

   opens a dropdown/menu for grouped or contextual items

Variants

Orientation \ Density	compact	comfortable
horizontal	—	—
vertical	—	—

Motion

State Transitions

Slug: state-transitions

hover/focus transitions on items stay subtle — no large translation

The "Anchor" Motion — Dropdowns, Popovers, and Tooltips

Slug: anchor-motion

dropdown triggers (account-dropdown, notification-dropdown, etc.) anchor to their button

Resources

• Open in Figma