Skip to content
heyrav design system
ComponentsSpec

Menu

A list of actions under a button. Arrow keys move, Escape closes and returns focus.

Show code
<div class="pop-anchor">
  <button class="btn btn-ghost btn-icon" data-menu aria-haspopup="menu" aria-expanded="false" aria-controls="menu-1" aria-label="More actions"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></button>
  <div class="menu" id="menu-1" role="menu" hidden>
    <button role="menuitem"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg> Copy link <span class="kbd">C</span></button>
    <button role="menuitem"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg> Share</button>
    <button role="menuitem"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg> Rename</button>
    <hr>
    <button role="menuitem" class="menu-danger"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg> Delete</button>
  </div>
</div>
  • Items are 40px tall inside a 6px inset, so the panel edge never touches a hover fill.
  • The destructive item is last, after a rule, and is the only coloured one.
  • Opening focuses the first item; ↑ ↓ cycle; Escape or an outside click closes.