Menu

Action menu

<button class="dsgn-button" data-variant="subtle" data-intent="neutral" popovertarget="dx-menu">Actions<span class="dsgn-icon" data-end aria-hidden="true">expand_more</span></button>
<div class="dsgn-menu" id="dx-menu" popover role="menu" aria-label="Invoice actions">
  <button class="dsgn-menu-item" role="menuitem"><span class="dsgn-icon" aria-hidden="true">edit</span><span class="dsgn-menu-item-label">Edit</span><span class="dsgn-menu-item-meta">E</span></button>
  <button class="dsgn-menu-item" role="menuitem"><span class="dsgn-icon" aria-hidden="true">download</span><span class="dsgn-menu-item-label">Download PDF</span></button>
  <div class="dsgn-menu-divider" role="separator"></div><div class="dsgn-menu-label">Show</div>
  <button class="dsgn-menu-item" role="menuitemcheckbox" aria-checked="true"><span class="dsgn-menu-item-label">Paid invoices</span></button>
  <div class="dsgn-menu-divider" role="separator"></div>
  <button class="dsgn-menu-item" role="menuitem" data-intent="danger"><span class="dsgn-icon" aria-hidden="true">delete</span><span class="dsgn-menu-item-label">Delete</span></button>
</div>

Usage

Action menu (needs dsgn.js for arrow keys, typeahead and focus return):

Item height = control height (Density). States: hover / keyboard highlight, pressed, checked (role="menuitemcheckbox|menuitemradio" + aria-checked="true" → trailing check), danger intent, disabled. The Select picker (appearance: base-select) reuses the same look.

Details

Classes

.dsgn-menu .dsgn-menu-item .dsgn-icon .dsgn-menu-item-label .dsgn-menu-item-meta .dsgn-menu-divider .dsgn-menu-label .dsgn-input

Tokens used

--dsgn-border --dsgn-border-width --dsgn-control-font-size --dsgn-control-gap --dsgn-control-line-height --dsgn-control-pad-x --dsgn-control-pad-y --dsgn-control-text --dsgn-danger-subtle --dsgn-danger-subtle-hover --dsgn-danger-text --dsgn-duration-fast --dsgn-ease --dsgn-focus --dsgn-focus-danger --dsgn-focus-width --dsgn-font-icon --dsgn-font-sans --dsgn-font-size-caption --dsgn-font-weight-medium --dsgn-font-weight-regular --dsgn-icon-grade --dsgn-line-height-caption --dsgn-line-separator --dsgn-neutral-subtle --dsgn-neutral-subtle-hover --dsgn-radius-l --dsgn-radius-m --dsgn-shadow-overlay --dsgn-space-4 --dsgn-space-40 --dsgn-space-6 --dsgn-space-64 --dsgn-surface-raised --dsgn-text --dsgn-text-disabled --dsgn-text-muted

In Figma

Menu · Menu item

Import alone

dsgn.systems/components/menu.css