Navigation

Top nav bar and sidebar navigation. All use the red accent for active states.

BiglerNet

• Dashboard
• Products
• Docs
• Settings

Usage

<div class="ds-nav-bar">
  <div class="ds-nav-bar-brand"><span class="dot"></span> BiglerNet</div>
  <ul class="ds-nav-bar-links">
    <li><a href="#" class="active">Dashboard</a></li>
    <li><a href="#">Products</a></li>
  </ul>
</div>

Rules

1. Sidebar nav: left border indicator on active item, grouped with section titles
2. Tabs: bottom border indicator, accent-primary on active
3. Focus state on all nav links