MICA / ACTION MENU EXAMPLE

Small choices, close at hand.

The same menu from a button or a context action. One quiet surface, with a nested panel when the choice needs a little more room.

Brand guidelines.pdf

Design · Updated 2 hours ago

Open More, right-click or long-press the file, or focus the row and press Shift+F10. Try Reassign for a submenu.

Actions in this example stay local.

Element design

Compact actions with a quiet active fill. Icons, section captions, separators, and shortcut hints are optional. Unavailable items stay discoverable but cannot run.

Submenus open on click, Right Arrow, or a short pointer pause. Left Arrow returns; Escape closes one level. On mobile the nested panel occupies the parent’s space and provides Back.

Arrow keys, Home/End, and typeahead move focus. Tab leaves the menu. Shortcut hints do not register application hotkeys.

Keyboard behavior follows the WAI-ARIA menu pattern.

API

<button popovertarget="actions">More</button>
<m-menu id="actions" popover align="end"
        aria-label="File actions">
  <button>Open file</button>
  <button popovertarget="people">
    <span>Reassign</span> <span aria-hidden="true">›</span>
  </button>
  <m-menu id="people" popover aria-label="Reassign to">
    <button data-menu-back>Back</button>
    <button>Alex Morgan</button>
  </m-menu>
  <hr>
  <button disabled>Download original</button>
</m-menu>

<!-- Optional context invocation; retain the More button. -->
<article tabindex="0" data-context-menu="actions">…</article>
<script type="module" src="menu.js"></script>

menu.js adds menu semantics, positioning, focus navigation, and context invocation. Application click handlers own actions and data; the element does not generate items. align="start|end" controls button placement, with viewport collision handling.

Without enhancement, native popover buttons remain available through Tab. Context invocation is an enhancement. Items added or removed by the application are reconciled automatically.