Menu

Width 375 768 Full Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<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>

A floating list of commands

The surface a dropdown, a context menu or an overflow menu is drawn on: a bordered, elevated column of rows. Items are the pressable ones, a label groups them, a separator divides them.

The check mark is DRAWN HERE, not by you: an item carrying aria-checked (a menuitemradio or menuitemcheckbox) reserves a gutter, and the glyph shows when the value is "true" — so set the attribute and do not add a ”✓” of your own, or the row shows two. A two-line item wraps its name and its __description in a __body; the gutter then spans both lines.

WHERE it sits is yours. There is no positioning here and no anchoring logic — floating a box next to a trigger needs collision detection and a scroll listener, which is an interaction library’s job, not a stylesheet’s. Same split as the popover and the tooltip below it.

The roles above are not decoration either: this draws a menu, it does not announce one. role="menu" / role="menuitem" and the arrow-key handling that pattern requires are yours to add.

Classes

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

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.