Navigation tabs

Use mr-nav-tabs for presentation. Multi-page navigation can opt into current-URL enhancement withdata-mr-nav-tabs-autoselect.

For authored current-page state, prefer the semanticaria-current="page" attribute. Autoselection writes the same attribute rather than a presentation modifier class.

Multi-page navigation

<nav class="mr-nav-tabs" data-mr-nav-tabs-autoselect>
  <a href="/markup-refine-lib/">Home</a>
  <a href="/markup-refine-lib/website-components/navigation-tabs">This page</a>
  <a href="/markup-refine-lib/website-components/card">Cards</a>
</nav>

Semantic current page

<nav class="mr-nav-tabs" aria-label="Section navigation">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about" aria-current="page">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Single-page tab relationship

data-mr-tab, data-mr-panel, anddata-mr-tabs-group connect triggers to panels. The enhancement supplies role="tab"/role="tabpanel",aria-selected, roving tabindex, relationships, and native hidden state. Arrow keys plus Home/End move and activate tabs.

<nav class="mr-nav-tabs" role="tablist" aria-label="Example tabs">
  <ul>
    <li><button data-mr-tab="demo-1" data-mr-tabs-group="demo">Home</button></li>
    <li><button data-mr-tab="demo-2" data-mr-tabs-group="demo">About</button></li>
  </ul>
</nav>

<section data-mr-panel="demo-1" data-mr-tabs-group="demo" data-mr-tabs-default>
  Home content
</section>
<section data-mr-panel="demo-2" data-mr-tabs-group="demo">
  About content
</section>