Skip to content

fin1te/dsv1.0.0

ds
Components
Menu

Menu

Dropdown menus with headings, shortcuts and separators.

Dropdown

Code

<div class="dropdown">
  <button class="btn" aria-haspopup="menu" aria-expanded="false" aria-controls="m1">Menu</button>
  <div class="menu" role="menu" id="m1" hidden>
    <button class="mi" role="menuitem"><svg class="i">…</svg><span>Open file…</span><kbd class="kbd">Ctrl+O</kbd></button>
    <hr />
    <p class="mh">Examples</p>
    <button class="mi" role="menuitemradio" aria-checked="true">…<span>Checkout outage</span></button>
    <hr />
    <button class="mi danger" role="menuitem">…<span>Clear canvas</span></button>
  </div>
</div>

The menu opens under its button. Arrow keys move, Enter picks, Escape closes and returns focus to the button. The script for this demo is about 30 lines.

Static

Code

<div class="menu">
  <button class="mi"><span>Duplicate</span><kbd class="kbd">Ctrl+D</kbd></button>
  <button class="mi"><span>Group into zone</span><kbd class="kbd">Ctrl+G</kbd></button>
  <button class="mi" disabled><span>Ungroup</span></button>
</div>

API

Class	On	What it does
`.dropdown`	div	Positions a .menu under its trigger.
`.menu`	div[role=menu]	The surface. Add .end to align it to the right edge.
`.mi`	button, a	An item: icon, label, shortcut.
`.mh`	p	A group heading inside the menu.
`hr`	.menu	A separator.
`aria-checked="true"`	.mi	A dot on the right, for radio and checkbox items.
`.danger`	.mi	Red, for destructive items. Keep them last.