Component

Item list

Published on

Description

The ItemList component renders rows styled like a Task list, each with an optional Dropdown of actions behind a three-dot button. Each item takes id, label, href, optional status/tag/note, and a menu array of links; the icon prop overrides the three-dot sprite reference.

Unlike Task list, rows are never clickable. A whole-row click target wrapping a button means a near-miss on the button navigates away, so a row either navigates as one surface (Task list) or holds controls (Item list) — never both.

Example

Open in new tab
View HTML markup 
<ul>
  <li class="ds-item" id="item-1"><a href="#">Step 1</a> <strong><span>Complete</span></strong>
    <div><button type="button" popovertarget="item-1-menu"><svg class="icon" aria-hidden="true">
          <use href="/img/icons.svg#dots"></use>
        </svg><span class="visually-hidden">Actions for Step 1</span></button>
      <div id="item-1-menu" popover="auto" class="ds-dropdown">
        <ul>
          <li><a href="#">Edit</a></li>
          <li><a href="#">Duplicate</a></li>
          <li><a href="#">Archive</a></li>
        </ul>
      </div>
    </div>
  </li>
  <li class="ds-item" id="item-2"><a href="#">Step 2</a> <strong class="inprogress"><span>In progress</span></strong>
    <div><button type="button" popovertarget="item-2-menu"><svg class="icon" aria-hidden="true">
          <use href="/img/icons.svg#dots"></use>
        </svg><span class="visually-hidden">Actions for Step 2</span></button>
      <div id="item-2-menu" popover="auto" class="ds-dropdown">
        <ul>
          <li><a href="#">Edit</a></li>
          <li><a href="#">Duplicate</a></li>
          <li><a href="#">Archive</a></li>
        </ul>
      </div>
    </div>
  </li>
  <li class="ds-item" id="item-3"><a href="#">Step 3</a> <strong class="incomplete"><span>Not yet started</span></strong>
    <div><button type="button" popovertarget="item-3-menu"><svg class="icon" aria-hidden="true">
          <use href="/img/icons.svg#dots"></use>
        </svg><span class="visually-hidden">Actions for Step 3</span></button>
      <div id="item-3-menu" popover="auto" class="ds-dropdown">
        <ul>
          <li><a href="#">Edit</a></li>
          <li><a href="#">Duplicate</a></li>
          <li><a href="#">Archive</a></li>
        </ul>
      </div>
    </div>
  </li>
</ul>

Accessibility

  • The three-dot button carries a .visually-hidden label naming its row ("Actions for …"), so buttons are distinguishable out of context.
  • The dropdown inherits its behavior from the Dropdown component: native popover, aria-expanded managed by the browser, Escape and light-dismiss, no JavaScript.
  • Task list — clickable rows without embedded controls
  • Dropdown — the per-row action menu

Variables

None