Navbar & Sidebar
Navbar
Section titled “Navbar”Horizontal navigation bar. Use .ac-topbar for a sticky top variant with blur effect.
Topbar
Section titled “Topbar”<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> Sidebar
Section titled “Sidebar”Vertical navigation panel. Use with .ac-sidebar class.
<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>