kit

Context 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.

Context menu

An invoice and a room

Main Hall

Booked

An invoice
Source
<details>
  <summary>An invoice and a room</summary>
  <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 href="#role-context-menu" data-kit-region="subject">Oakmere Primary School</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Invoice</span></p><p data-kit-region="facts"><span data-kit-region="fact"><span data-kit-role="amount">£84.00</span></span></p></div></div>
  </div>
  <div data-kit-region="actions">
<button data-kit-role="secondary-action" type="button"><span data-kit-region="label">
  Send reminder
</span></button>
      <div id="role-context-menu-invoice" data-kit-role="action-menu">
<button aria-controls="role-context-menu-invoice-layer" aria-haspopup="menu" aria-label="More actions for this invoice" data-kit-role="icon-action" id="role-context-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-context-menu-invoice-layer" popover="manual" role="menu" aria-labelledby="role-context-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-context-menu-invoice-layer/0-0" 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></button></li><li role="none"><button type="button" aria-describedby="role-context-menu-invoice-layer/0-1-reason" aria-disabled="true" data-kit-region="item" id="role-context-menu-invoice-layer/0-1" 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-context-menu-invoice-layer/0-1-reason" data-kit-region="reason">Only the invoice&#39;s owner can archive it.</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-context-menu-invoice-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>
    </div></div>
</article>
  <article data-kit-role="card">
  <h3 data-kit-region="subject"><a href="#role-context-menu">Main Hall</a></h3>
  <div data-kit-region="line"><p data-kit-region="facts"><span data-kit-region="fact">Booked <time datetime="2025-04-12">12 April 2025</time></span></p></div>
      <div data-kit-role="action-group">
<button data-kit-role="secondary-action" type="button"><span data-kit-region="label">
  Hold the room
</span></button>
<button data-kit-role="destructive-action" type="button">
  <svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg><span data-kit-region="label">
  Cancel booking
</span></button>
</div>
</article>
</details>
<details>
  <summary>An invoice</summary>
  <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 href="#role-context-menu" data-kit-region="subject">Oakmere Primary School</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Invoice</span></p><p data-kit-region="facts"><span data-kit-region="fact"><span data-kit-role="amount">£84.00</span></span></p></div></div>
  </div>
  <div data-kit-region="actions">
<button data-kit-role="secondary-action" type="button"><span data-kit-region="label">
  Send reminder
</span></button>
      <div id="role-context-menu-row-invoice" data-kit-role="action-menu">
<button aria-controls="role-context-menu-row-invoice-layer" aria-haspopup="menu" aria-label="More actions for this invoice" data-kit-role="icon-action" id="role-context-menu-row-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-context-menu-row-invoice-layer" popover="manual" role="menu" aria-labelledby="role-context-menu-row-invoice-trigger"><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" id="role-context-menu-row-invoice-layer/0-0" 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></button></li><li role="none"><button type="button" aria-describedby="role-context-menu-row-invoice-layer/0-1-reason" aria-disabled="true" data-kit-region="item" id="role-context-menu-row-invoice-layer/0-1" 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-context-menu-row-invoice-layer/0-1-reason" data-kit-region="reason">Only the invoice&#39;s owner can archive it.</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-context-menu-row-invoice-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>
    </div></div>
</article>
</details>