kit

Action menu

Built revision v17.10.0

CSS core
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

On Home, List, Settings

Action menu

An invoice's actions
Source
<details>
  <summary>An invoice's actions</summary>
  <div id="role-action-menu-invoice" data-kit-role="action-menu">
<button aria-controls="role-action-menu-invoice-layer" aria-haspopup="menu" aria-label="More actions for this invoice" data-kit-role="icon-action" id="role-action-menu-invoice-trigger" type="button">
  <svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"></path></svg>
</button><ul data-kit-role="popover" id="role-action-menu-invoice-layer" popover="manual" role="menu" aria-labelledby="role-action-menu-invoice-trigger"><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" id="role-action-menu-invoice-layer/0-0" role="menuitem"><svg data-kit-icon="pencil-simple" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"></path></svg><span data-kit-region="name">Edit</span><span data-kit-region="keys"><kbd>E</kbd></span></button></li><li role="none"><button type="button" data-kit-region="item" id="role-action-menu-invoice-layer/0-1" role="menuitem"><svg data-kit-icon="copy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"></path></svg><span data-kit-region="name">Duplicate</span><span data-kit-region="keys"><kbd>Ctrl</kbd><kbd>D</kbd></span></button></li><li role="none"><button type="button" data-kit-region="item" id="role-action-menu-invoice-layer/0-2" role="menuitem"><svg data-kit-icon="envelope-simple" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z"></path></svg><span data-kit-region="name">Send…</span></button></li><li role="none"><button type="button" aria-controls="role-action-menu-invoice-sort" aria-haspopup="menu" data-kit-region="item" id="role-action-menu-invoice-layer/0-3" role="menuitem"><svg data-kit-icon="arrows-down-up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M117.66,170.34a8,8,0,0,1,0,11.32l-32,32a8,8,0,0,1-11.32,0l-32-32a8,8,0,0,1,11.32-11.32L72,188.69V48a8,8,0,0,1,16,0V188.69l18.34-18.35A8,8,0,0,1,117.66,170.34Zm96-96-32-32a8,8,0,0,0-11.32,0l-32,32a8,8,0,0,0,11.32,11.32L168,67.31V208a8,8,0,0,0,16,0V67.31l18.34,18.35a8,8,0,0,0,11.32-11.32Z"></path></svg><span data-kit-region="name">Sort lines</span></button><ul data-kit-role="popover" id="role-action-menu-invoice-sort" popover="manual" role="menu" aria-labelledby="role-action-menu-invoice-layer/0-3"><li role="none" data-kit-region="back"><button type="button"><svg data-kit-icon="arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg><span data-kit-region="name">Back</span></button></li><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" aria-checked="true" data-kit-region="item" id="role-action-menu-invoice-sort/0-0" role="menuitemradio"><span data-kit-region="name">By date</span></button></li><li role="none"><button type="button" aria-checked="false" data-kit-region="item" id="role-action-menu-invoice-sort/0-1" role="menuitemradio"><span data-kit-region="name">By amount</span></button></li><li role="none"><button type="button" aria-checked="false" data-kit-region="item" id="role-action-menu-invoice-sort/0-2" role="menuitemradio"><span data-kit-region="name">By description</span></button></li></ul></li></ul></li><li role="none"><button type="button" aria-describedby="role-action-menu-invoice-layer/0-4-reason" aria-disabled="true" data-kit-region="item" id="role-action-menu-invoice-layer/0-4" role="menuitem"><svg data-kit-icon="archive" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,48H32A16,16,0,0,0,16,64V88a16,16,0,0,0,16,16v88a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V104a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48ZM208,192H48V104H208ZM224,88H32V64H224V88ZM96,136a8,8,0,0,1,8-8h48a8,8,0,0,1,0,16H104A8,8,0,0,1,96,136Z"></path></svg><span data-kit-region="name">Archive</span><span id="role-action-menu-invoice-layer/0-4-reason" data-kit-region="reason">Only the invoice's owner can archive it.</span></button></li></ul></li><li role="none" data-kit-region="group"><span id="role-action-menu-invoice-layer-group-1" data-kit-region="group-name">Show</span><ul role="group" aria-labelledby="role-action-menu-invoice-layer-group-1"><li role="none"><button type="button" aria-checked="true" data-kit-region="item" id="role-action-menu-invoice-layer/1-0" role="menuitemcheckbox"><span data-kit-region="name">Line totals</span></button></li><li role="none"><button type="button" aria-checked="false" data-kit-region="item" id="role-action-menu-invoice-layer/1-1" role="menuitemcheckbox"><span data-kit-region="name">Notes</span></button></li></ul></li><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" data-kit-role="destructive-action" id="role-action-menu-invoice-layer/2-0" role="menuitem"><svg data-kit-icon="trash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path></svg><span data-kit-region="name">Delete invoice</span></button></li></ul></li></ul></div>
</details>

Action menu, inert

An Action menu in a Row's actions, its trigger inert with its words.

Oakmere Primary School · due

A sent invoice can’t be changed until it is filed.

An Action menu alone, its trigger inert with its words directly after it.

A sent invoice can’t be changed until it is filed.

Source
<p class="specimen-case-line">An Action menu in a Row's actions, its trigger inert with its words.</p>
  <article data-kit-role="row">
    <div data-kit-region="content-column">
      <div data-kit-region="subject-column">
        <div data-kit-region="line">
          <div data-kit-region="subject-stamp">
            <a data-kit-region="subject" href="#role-action-menu-inert">Invoice 1042</a>
          </div>
          <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Oakmere Primary School ·&nbsp;due <time datetime="2026-10-30">30 October 2026</time></span></p></div>
        </div>
      </div>
      <div data-kit-region="actions" data-kit-holds="words">
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Send reminder</span></button>
<div id="role-action-menu-inert-row" data-kit-role="action-menu">
<button type="button" data-kit-role="icon-action" data-kit-state="inert" disabled id="role-action-menu-inert-row-trigger" aria-label="More actions for this invoice" aria-haspopup="menu" aria-controls="role-action-menu-inert-row-layer" aria-describedby="role-action-menu-inert-row-trigger-words"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"></path></svg></button><ul data-kit-role="popover" id="role-action-menu-inert-row-layer" popover="manual" role="menu" aria-labelledby="role-action-menu-inert-row-trigger"><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" id="role-action-menu-inert-row-layer/0-0" role="menuitem"><svg data-kit-icon="pencil-simple" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"></path></svg><span data-kit-region="name">Edit</span><span data-kit-region="keys"><kbd>E</kbd></span></button></li><li role="none"><button type="button" data-kit-region="item" id="role-action-menu-inert-row-layer/0-1" role="menuitem"><svg data-kit-icon="copy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"></path></svg><span data-kit-region="name">Duplicate</span><span data-kit-region="keys"><kbd>Ctrl</kbd><kbd>D</kbd></span></button></li></ul></li><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" data-kit-role="destructive-action" id="role-action-menu-inert-row-layer/1-0" role="menuitem"><svg data-kit-icon="trash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path></svg><span data-kit-region="name">Delete invoice</span></button></li></ul></li></ul></div>
<p data-kit-region="words" id="role-action-menu-inert-row-trigger-words">A sent invoice can’t be changed until it is filed.</p>
      </div>
    </div>
  </article>

<p class="specimen-case-line">An Action menu alone, its trigger inert with its words directly after it.</p>
<div id="role-action-menu-inert-alone" data-kit-role="action-menu">
<button type="button" data-kit-role="icon-action" data-kit-state="inert" disabled id="role-action-menu-inert-alone-trigger" aria-label="More actions for this invoice" aria-haspopup="menu" aria-controls="role-action-menu-inert-alone-layer" aria-describedby="role-action-menu-inert-alone-trigger-words"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"></path></svg></button><ul data-kit-role="popover" id="role-action-menu-inert-alone-layer" popover="manual" role="menu" aria-labelledby="role-action-menu-inert-alone-trigger"><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" id="role-action-menu-inert-alone-layer/0-0" role="menuitem"><svg data-kit-icon="pencil-simple" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"></path></svg><span data-kit-region="name">Edit</span><span data-kit-region="keys"><kbd>E</kbd></span></button></li><li role="none"><button type="button" data-kit-region="item" id="role-action-menu-inert-alone-layer/0-1" role="menuitem"><svg data-kit-icon="copy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"></path></svg><span data-kit-region="name">Duplicate</span><span data-kit-region="keys"><kbd>Ctrl</kbd><kbd>D</kbd></span></button></li></ul></li><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" data-kit-role="destructive-action" id="role-action-menu-inert-alone-layer/1-0" role="menuitem"><svg data-kit-icon="trash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path></svg><span data-kit-region="name">Delete invoice</span></button></li></ul></li></ul></div>
<p data-kit-region="words" id="role-action-menu-inert-alone-trigger-words">A sent invoice can’t be changed until it is filed.</p>