Components · Navigation

Navigation

Wayfinding — where am I, where can I go. Tabs and the active page take the live accent; everything else stays quiet until hovered.

Tabs

.across-tabs · .across-pill-tabs

Two styles, one behaviour (auto-wired by primitives.js): underline tabs for primary in-page sections, pill tabs for compact toolbars. The active marker is the accent.

HTML
<!-- Tabs: keep role="tablist" / role="tab". They switch on
     Arrow keys and Home/End, and only the active tab is in the
     tab order — both driven by those roles. -->
<div class="across-tabs" role="tablist">          <!-- underline -->
  <button class="across-tabs__tab is-active" role="tab" aria-selected="true">Overview</button>
  <button class="across-tabs__tab" role="tab">Activity</button>
</div>

<div class="across-pill-tabs" role="tablist">          <!-- pill -->
  <button class="across-pill-tabs__tab is-active" role="tab" aria-selected="true">Convert</button>
  <button class="across-pill-tabs__tab" role="tab">Historical</button>
</div>

<!-- Without the roles it is a segmented control, not a tablist:
     it toggles on click and gets aria-pressed instead. -->
<div class="across-pill-tabs">
  <button class="across-pill-tabs__tab is-active">Grid</button>
  <button class="across-pill-tabs__tab">List</button>
</div>

Pagination

.across-pagination

For paged tables and lists. The current page takes the accent fill; prev/next disable at the ends; an ellipsis collapses long ranges.

HTML
<nav class="across-pagination" aria-label="Pagination">
  <button class="across-pagination__btn" disabled><i class="ph-light ph-caret-left"></i></button>
  <button class="across-pagination__btn is-active" aria-current="page">1</button>
  <button class="across-pagination__btn">2</button>
  <span class="across-pagination__ellipsis">…</span>
  <button class="across-pagination__btn"><i class="ph-light ph-caret-right"></i></button>
</nav>