Navigation

<aside class="app-sidebar">
  <div class="app-sidebar__header">...</div>
  <div class="app-sidebar__body">...</div>
  <div class="app-sidebar__footer">...</div>
</aside>

<aside class="app-sidebar sidebar-collapsed">...</aside>
<script>
  AcrossUI.toggleSidebar();
  AcrossUI.setSidebarCollapsed(true);
</script>

<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>

<nav class="across-breadcrumb" aria-label="Breadcrumb">
  <ol class="across-breadcrumb__list">
    <li class="across-breadcrumb__item">
      <a href="#" class="across-breadcrumb__link">
        <i class="ph-light ph-house across-breadcrumb__icon"></i>
        Home
      </a>
    </li>
    <li class="across-breadcrumb__separator" aria-hidden="true">
      <i class="ph-light ph-caret-right"></i>
    </li>
    <li class="across-breadcrumb__item">
      <a href="#" class="across-breadcrumb__link">Section</a>
    </li>
    <li class="across-breadcrumb__separator" aria-hidden="true">
      <i class="ph-light ph-caret-right"></i>
    </li>
    <li class="across-breadcrumb__item">
      <span class="across-breadcrumb__page" aria-current="page">Current</span>
    </li>
  </ol>
</nav>