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.

The trail back up. The current page is bold and non-interactive; ancestors are quiet links that color on hover.

HTML

<nav class="across-breadcrumb" aria-label="Breadcrumb">
  <a href="#">Orbit</a><span class="across-breadcrumb__sep">/</span>
  <a href="#">Settings</a><span class="across-breadcrumb__sep">/</span>
  <span class="across-breadcrumb__current" aria-current="page">Time Zones</span>
</nav>

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

<div class="across-tabs">          <!-- underline -->
  <button class="across-tabs__tab is-active">Overview</button>
  <button class="across-tabs__tab">Activity</button>
</div>

<div class="across-pill-tabs">          <!-- pill -->
  <button class="across-pill-tabs__tab is-active">Convert</button>
  <button class="across-pill-tabs__tab">Historical</button>
</div>

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>

The shared surface for dropdowns and context menus — items, icons, shortcuts, separators, and a danger variant. Shown open below; in use, wrap it in .across-dropdown and toggle on click for the entrance wipe.

HTML

<div class="across-dropdown">
  <button class="across-btn">Board actions</button>
  <div class="across-menu">
    <button class="across-menu__item"><i class="ph-light ph-pencil-simple"></i> Rename
      <span class="across-menu__shortcut">⌘E</span></button>
    <div class="across-menu__sep"></div>
    <button class="across-menu__item across-menu__item--danger">Delete board</button>
  </div>
</div>

Navigation

Breadcrumbs

Tabs

Pagination

Menu & Dropdown