Navigation
Sidebars, tabs, and breadcrumbs for orientation across Across apps.
Tabs
Switchable panels with underline and pill variants.
Overview content goes here. This panel is currently active.
Features content goes here.
Documentation content goes here.
<div class="across-tabs">
<div class="across-tabs__list" role="tablist">
<button class="across-tabs__trigger is-active" data-tab="tab-1">Tab 1</button>
<button class="across-tabs__trigger" data-tab="tab-2">Tab 2</button>
</div>
<div id="tab-1" class="across-tabs__panel is-active">Content 1</div>
<div id="tab-2" class="across-tabs__panel">Content 2</div>
</div>Pagination
Navigation for paginated content lists.
Structure: .across-pagination > .across-pagination__list >
.across-pagination__link.
States: .is-active for current page, .is-disabled for inactive
arrows.
Stepper
Multi-step wizard with numbered indicators and progress connectors. Steps can be completed, active, or pending.
Structure: .across-stepper > .across-stepper__step (with
.is-completed / .is-active) > __indicator +
__connector.
Vertical: Add .across-stepper--vertical to the container.
Scroll To Top
A floating button that appears when the user scrolls past a threshold and smoothly returns to the top.
The button appears in the bottom-right corner of the page when you scroll down. Try scrolling this page!
<button class="across-scroll-top" aria-label="Scroll to top">
<i class="ph-light ph-arrow-up"></i>
</button>Structure: A single <button class="across-scroll-top"> anywhere in
the page.
Behavior: Automatically shows/hides based on scroll position. Click smoothly scrolls to top.