Navigation

Navigation systems are the fundamental method of moving around a website.

An example of a horizontal navigation bar can be found at the top of this page.

An example of a super vertical navigation can be found on the left hand side of this page.

Code

Horizontal Navigation

				
<header class="container--baseline">
  <h1 class="m--1 g--4">Navigation</h1>
  <nav class="g--3 nav--horizontal">
    <ul>
      <li><a href="http://www.google.com">Nav link</a></li>
      <li><a href="http://www.google.com">Hello</a></li>
      <li><a href="http://www.google.com">Contact</a></li>
      <li class="dropdown"><a href="http://www.g.com">Dropdown</a>
        <ul>
          <li><a href="http://www.google.com">D Link</a></li>
          <li><a href="http://www.google.com">D Link</a></li>
          <li><a href="http://www.google.com">D Link</a></li>
          <li><a href="http://www.google.com">D Link</a></li>
        </ul>
      </li>
      <li><a href="http://www.google.com">Portfolio</a></li>
    </ul>
  </nav>
</header>

Responsive

To make your horizontal navigation responsive, use the following code before the .nav--horizontal class.

				
<input type="checkbox" id="nav--horizontal-responsive">
<label for="nav--horizontal-responsive">MENU</label>
<nav class="nav--horizontal g--4">
    ....

Super Vertical Navigation

				
<aside class="nav--super-vertical g--2 g-med--3 g-small--6 g-tiny--12 no-margin-vertical">
  <div class="g--12 logo-area no-margin-vertical">
    Your logo here
  </div>
  <nav class="g--12">
    <a href="">About</a>
    <div class="nav-collapsible">
      <input type="checkbox" id="nav-collapsible-1">
      <label for="nav-collapsible-1">Components</label>
      <div class="nav-collapsible-links">
        <a href="../docs/alerts.html">Alerts</a>
        <a href="../docs/animations.html">Animations</a>
        <a href="../docs/buttons.html">Buttons</a>
      </div>
    </div>
    <a href="">Contact</a>
  </nav>
</aside>

Responsive

To make your super vertical navigation responsive, use the following code before the .nav--super-vertical class.

				
<input type="checkbox" id="nav--super-vertical-responsive">
<label for="nav--super-vertical-responsive">MENU</label>
<nav class="nav--super-vertical g--2">
    ....