kit

Context menu

Actions for something, opened with a right-click, Shift+F10 or the Menu key, at the pointer, with the same keyboard support as every kit menu.

Tier 2 · behaviour APG menu beta

Example

Right-click here, or focus it and press Shift+F10

Selected: nothing yet

Show the markup 
<div class="kit-stack demo-fill" data-gap="3">
  <kit-menu context label="Example actions" data-demo-note="ctx-out">
    <div class="demo-box demo-context" tabindex="0">Right-click here, or focus it and press Shift+F10</div>
    <div class="kit-menu-list">
      <button value="open">Open<kbd>↵</kbd></button>
      <button value="rename">Rename<kbd>F2</kbd></button>
      <button value="duplicate">Duplicate</button>
      <hr>
      <button value="delete" data-tone="bad">Delete</button>
    </div>
  </kit-menu>
  <p class="demo-note" id="ctx-out">Selected: nothing yet</p>
</div>

Usage

<kit-menu context label="File actions">
  <div class="kit-card" tabindex="0">A file</div>
  <div class="kit-menu-list">
    <button>Open</button>
    <button>Rename</button>
    <hr>
    <button data-tone="bad">Delete</button>
  </div>
</kit-menu>

It's a menu with context: the first child is the region it belongs to, instead of a button. Right-clicking the region opens the menu at the pointer; Shift+F10 or the keyboard's Menu key opens it beside whatever has focus. Everything else, from typeahead to the select event, is the menu's. label names it ("File actions").

Accessibility

  • A context menu is a shortcut, never the only way to an action: put the same actions in a visible menu or toolbar too, since touch and many keyboard users won't find it.
  • The region should be focusable (or contain focusable things), so Shift+F10 can reach it.
  • Escape, a click elsewhere or scrolling closes it, and focus goes back to where it was.