Navbar

Horizontal and vertical navigation bar.

Basic usage

BrandHomeAboutContact

Login

<nav class="kit-navbar">
  <a class="kit-navbar-brand" href="#">Brand</a>
  <a class="kit-navbar-item -active" href="#">Home</a>
  <a class="kit-navbar-item" href="#">About</a>
  <a class="kit-navbar-item" href="#">Contact</a>
  <div class="kit-navbar-group">
    <a class="kit-navbar-item" href="#">Login</a>
  </div>
</nav>

Vertical (sidebar)

BrandDashboardSettingsFiles

<nav class="kit-navbar -vertical">
  <a class="kit-navbar-brand" href="#">Brand</a>
  <a class="kit-navbar-item -active" href="#">Dashboard</a>
  <a class="kit-navbar-item" href="#">Settings</a>
  <a class="kit-navbar-item" href="#">Files</a>
</nav>

Compact

AppHomeFilesSettings

<nav class="kit-navbar -compact">
  <a class="kit-navbar-brand" href="#">App</a>
  <a class="kit-navbar-item -active" href="#">Home</a>
  <a class="kit-navbar-item" href="#">Files</a>
  <a class="kit-navbar-item" href="#">Settings</a>
</nav>