Github Repo v1.0.1

Navigation


A responsive horizontal nav bar that can contain links, tabs, buttons, icons, and a logo.

The .nav container can have 3 parts:

  • .nav-left
  • .nav-center
  • .nav-right

Each of these containers can have a <a> ,.button, .tabs, .brand. Add a active class to show a active link.

Examples

<nav class="nav">
  <div class="nav-left">
    <a class="brand" href="#">Brand</a>
    <div class="tabs">
      <a>Link 1</a>
      <a class="active">Link 2</a>
    </div>
  </div>
  <div class="nav-right">
    <a class="button outline">Button</a>
  </div>
</nav>
<nav class="nav">
  <div class="nav-left">
    <a class="active">Link 1</a>
    <a>Link 2</a>
  </div>
  <div class="nav-center">
    <a class="brand">
      <img src="logo.png" alt="">
    </a>
  </div>
  <div class="nav-right">
      <a>Link 3</a>
      <a>Link 4</a>
  </div>
</nav>

Customize

The nav component uses the .tabs styling, so check that page for more styling information.

/* Navbar */
.nav a,
.nav .brand {
  padding: 1rem 2rem;
  color: #555;
}