Dropdown menu
A menu of actions opened from a button. Section labels, dividers, shortcuts and a destructive item.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<div class="px-dropdown">
<button type="button" class="px-btn px-btn--secondary-gray" data-px-menu aria-controls="mn-1">Options<svg class="px-icon" aria-hidden="true">…</svg></button>
<div class="px-menu px-menu--floating" id="mn-1" role="menu" hidden>
<div class="px-menu__label">Olivia Rhye</div>
<button type="button" class="px-menu__item" role="menuitem" data-toast="Opening profile"><svg class="px-icon" aria-hidden="true">…</svg>View profile<span class="px-menu__shortcut">⌘P</span></button>
<button type="button" class="px-menu__item" role="menuitem"><svg class="px-icon" aria-hidden="true">…</svg>Settings<span class="px-menu__shortcut">⌘S</span></button>
<button type="button" class="px-menu__item" role="menuitem"><svg class="px-icon" aria-hidden="true">…</svg>Keyboard shortcuts<span class="px-menu__shortcut">?</span></button>
<hr class="px-menu__sep">
<button type="button" class="px-menu__item" role="menuitem" aria-disabled="true"><svg class="px-icon" aria-hidden="true">…</svg>Team (soon)</button>
<button type="button" class="px-menu__item px-menu__item--destructive" role="menuitem"><svg class="px-icon" aria-hidden="true">…</svg>Log out</button>
</div>
</div>Usage
- Use for actions. For choosing a value, use Select.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Static menu
The panel on its own (Menu component in Figma).
<div class="px-menu" role="menu" aria-label="File"><button type="button" class="px-menu__item" role="menuitem"><svg class="px-icon" aria-hidden="true">…</svg>Duplicate<span class="px-menu__shortcut">⌘D</span></button><button type="button" class="px-menu__item" role="menuitemcheckbox" aria-checked="true">Show grid<svg class="px-icon px-menu__item-check" aria-hidden="true">…</svg></button><hr class="px-menu__sep"><button type="button" class="px-menu__item px-menu__item--destructive" role="menuitem"><svg class="px-icon" aria-hidden="true">…</svg>Delete</button></div>API reference
| Class / attribute | Type | Description |
|---|---|---|
data-px-menu + aria-controls | attribute | Trigger that opens the menu. |
px-menu · --floating · --sm | class | Panel. |
px-menu__item · --destructive | class | Item (Figma Type). |
px-menu__label · __sep · __shortcut | class | Section label, divider, shortcut. |
Figma properties
Menu2 variants · page “Dropdown”Open
Dropdown / context menu panel: optional section label, items, dividers. Elevation lg on --px-menu-background. Close on Escape and outside click; return focus to the trigger.
| Property | Type | Values |
|---|---|---|
| Direction | Variant | LTR RTL |
Menu item40 variants · page “Dropdown”Open
One row in a Menu, Select or Combobox list. Selected shows a check (single-select). Destructive for delete / sign-out. Keyboard: arrow keys move focus, Enter selects. RTL text: Label property drives L…
| Property | Type | Values |
|---|---|---|
| Label | Text | “Menu item” |
| Leading icon | Boolean | — |
| Leading icon swap | Instance swap | — |
| Shortcut | Boolean | — |
| Shortcut text | Text | “⌘K” |
| Size | Variant | Small Medium |
| Type | Variant | Default Destructive |
| State | Variant | Active Hover Focused Disabled Selected |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-menu-background | color-surface-overlay | #ffffff |
--px-menu-border | color-border-neutral-subtle | #f2f4f7 |
--px-menu-item-background-hover | color-background-neutral-default | #f2f4f7 |
--px-menu-item-background-selected | color-background-brand-subtle | #eff6ff |
--px-menu-item-content-selected | color-content-brand-default | #2563eb |
--px-menu-item-content-destructive | color-content-danger-default | #b42318 |
--px-menu-item-icon | color-content-neutral-secondary | #475467 |
--px-menu-section | color-content-neutral-tertiary | #667085 |
--px-menu-radius | radius-12 | 12px |
--px-menu-item-radius | radius-8 | 8px |
--px-menu-padding | spacing-xs | 4px |
--px-menu-item-padding-x | spacing-12 | 12px |
--px-menu-item-gap | spacing-sm | 8px |
--px-menu-item-height-sm | control-height-sm | 32px |
Show all 16 tokens
| Token | Alias | Light value |
|---|---|---|
--px-menu-item-height-md | control-height-md | 40px |
--px-menu-width | 240px | 240px |
Accessibility
- Arrow keys move; Escape closes and returns focus to the trigger.
- Close on outside click.