Nav lists

<nav class="nav-list">
  <h2 class="header">Nav</h2>
  <ul>
      <li><a class="active" href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a>
        <ul>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </li>
  </ul>
</nav>

Ol

<nav class="nav-list">
  <h2 class="header">Nav</h2>
  <ol>
      <li><a class="active" href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a>
        <pl>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
        </ol>
      </li>
  </ol>
</nav>

Colours

<nav class="canvas nav-list">
  <h2 class="header">Nav</h2>
  <ul>
      <li><a href="#">Item</a></li>
      <li><a class="active" href="#">Item</a></li>
      <li><a href="#">Item</a>
  </ul>
</nav>

<nav class="nav-list">
  <h2 class="header">Nav</h2>
  <ol>
      <li class="canvas"><a href="#">Item</a></li>
      <li class="primary"><a href="#">Item</a></li>
      <li class="secondary"><a href="#">Item</a></li>
      <li class="tertiary"><a href="#">Item</a></li>
      <li class="success"><a href="#">Item</a></li>
      <li class="danger"><a href="#">Item</a></li>
      <li class="warning"><a href="#" >Item</a></li>
      <li class="info"><a href="#">Item</a></li>
  </ol>
</nav>