Navbar & Sidebar

Navbar

Horizontal navigation bar. Use .ac-topbar for a sticky top variant with blur effect.

Topbar

Preview Code

<header class="ac-topbar">
<div class="ac-topbar__inner">
  <a href="/" class="ac-topbar__brand">Acopl</a>
  <nav class="ac-topbar__nav">
    <a href="/dashboard" aria-current="page">Dashboard</a>
    <a href="/shipments">Shipments</a>
    <a href="/reports">Reports</a>
  </nav>
  <div class="ac-topbar__actions">
    <ac-button variant="primary" size="sm">New shipment</ac-button>
  </div>
</div>
</header>

Copy

---

Sidebar

Vertical navigation panel. Use with .ac-sidebar class.

Preview Code

<nav class="ac-sidebar" style="width:220px">
<div class="ac-sidebar__section">
  <span class="ac-sidebar__label">Main</span>
  <a href="#" class="is-active" aria-current="page">Dashboard</a>
  <a href="#">Shipments</a>
  <a href="#">Fleet</a>
</div>
<div class="ac-sidebar__section">
  <span class="ac-sidebar__label">Account</span>
  <a href="#">Settings</a>
  <a href="#">Billing</a>
</div>
</nav>

Copy