Menu

Preview Code

375 768 Full

Open

html

<div class="aparte-menu" role="menu">
  <span class="aparte-menu__label">Message</span>
  <button class="aparte-menu__item" role="menuitem">Copy</button>
  <button class="aparte-menu__item" role="menuitem">Retry</button>
  <div class="aparte-menu__separator" role="separator"></div>
  <button class="aparte-menu__item" role="menuitem" disabled>Delete</button>
  <div class="aparte-menu__separator" role="separator"></div>
  <span class="aparte-menu__label">Mode</span>
  <button class="aparte-menu__item" role="menuitemradio" aria-checked="true">
    <span class="aparte-menu__body">
      Ask
      <span class="aparte-menu__description">Every tool call waits for you</span>
    </span>
  </button>
  <button class="aparte-menu__item" role="menuitemradio" aria-checked="false">
    <span class="aparte-menu__body">
      Auto
      <span class="aparte-menu__description">Runs everything, reports after</span>
    </span>
  </button>
</div>

.aparte-menu is the surface a dropdown, a context menu or a ⋯ menu is drawn on: a bordered, raised column of __item rows, with __label headings and __separator lines between groups. A two-line item wraps its name and a __description in a __body. The conversation list’s row menu is this recipe.

The check mark is drawn for you: an item with aria-checked (a menuitemradio or menuitemcheckbox) gets a gutter, and the mark shows when the value is "true". Do not add a check of your own.

Where the menu sits, and opening and closing it, are yours: there is no positioning here.

Customize

Variable	Default
--aparte-menu-shadow	0 4px 12px rgba(0, 0, 0, 0.1)
--aparte-menu-max-width	—
--aparte-menu-min-width	—

Classes

.aparte-menu · .aparte-menu__body · .aparte-menu__description · .aparte-menu__item · .aparte-menu__label · .aparte-menu__separator

Accessibility

• Use role="menu" and role="menuitem" (or menuitemradio / menuitemcheckbox with aria-checked) on real buttons, and role="separator" between groups.
• The button that opens the menu takes aria-haspopup="menu" and aria-expanded; the arrow keys between items and Escape to close are your script’s.

Related

• Popover — a floating box for anything that is not a list of commands.
• Select — a list that holds a value.