Clickable Item List

mr-clickable-list is presentation. Usedata-mr-clickable-list only when JavaScript needs a stable list root, such as when pairing the list with a filter input.

Nested disclosure uses native <details>.

Filterable list

<div>
  <input data-mr-clickable-list-filter placeholder="Filter menu...">
  <ul class="mr-clickable-list" data-mr-clickable-list>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <details>
        <summary><a>Services</a></summary>
        <ul>
          <li><a href="#">Web</a></li>
          <li><a href="#">Mobile Apps</a></li>
        </ul>
      </details>
    </li>
  </ul>
</div>

Remember disclosure state across reloads

Add data-mr-clickable-list-persist with a stable storage namespace. Each <details> whose state should be remembered must have a stableid. Markup Refine stores the set of open IDs inlocalStorage, so the disclosure state survives reloads and normal same-origin navigation.

<ul
  class="mr-clickable-list"
  data-mr-clickable-list-persist="project-navigation"
>
  <li>
    <details id="project-navigation-guides" open>
      <summary>Guides</summary>
      <ul>
        <li><a href="#persistence-setup">Setup</a></li>
        <li><a href="#persistence-deploy">Deploy</a></li>
      </ul>
    </details>
  </li>
  <li>
    <details id="project-navigation-reference">
      <summary>Reference</summary>
      <ul>
        <li><a href="#persistence-api">API</a></li>
      </ul>
    </details>
  </li>
</ul>

• Guides

  • Setup
  • Deploy
• Reference

  • API

Try opening/closing the sections above and refresh the page. The authoredopen attributes remain the no-JavaScript and unavailable-storage fallback. The current-link state is not persisted becausedata-mr-clickable-list-autoselect derives it from the URL on each load, and filter text remains intentionally transient.

Filtering may temporarily open matching disclosures, but those programmatic openings are not written into the persisted disclosure state.

Current-URL selection

The matching link receives aria-current="page". No selected presentation class is required by JavaScript.

<ul
  class="mr-clickable-list"
  data-mr-clickable-list-autoselect
>
  <li><a href="/">Home</a></li>
  <li><a href="/docs">Docs</a></li>
</ul>