Nav

A simple horizontal navigation component prepared for use in the navigation bar.

<nav>
  <ul class="gra-nav">
    <li class="gra-nav-item">
      <a class="gra-nav-link" href="#">Home</a>
    </li>
    <li class="gra-nav-item">
      <a class="gra-nav-link" href="#">About</a>
    </li>
    <li class="gra-nav-item">
      <a class="gra-nav-link current" href="#" aria-current="page">Contact</a>
    </li>
    <li class="gra-nav-item">
      <a class="gra-nav-link" href="#">Works</a>
    </li>
  </ul>
</nav>

Full Width

For using full with you can use .gra-nav-fill with .gra-nav class.

<nav>
  <ul class="gra-nav gra-nav-fill">
    <li class="gra-nav-item">
      <a class="gra-nav-link" href="#">Home</a>
    </li>
    <li class="gra-nav-item">
      <a class="gra-nav-link" href="#">About</a>
    </li>
    <li class="gra-nav-item">
      <a class="gra-nav-link current" href="#" aria-current="page">Contact</a>
    </li>
    <li class="gra-nav-item">
      <a class="gra-nav-link" href="#">Works</a>
    </li>
  </ul>
</nav>