turretcss

Nav

For menu and navigation components use the nav element wrapped around an unordered list.

Example

HTML

<nav>
  <ul>
    <li>
      <a href="...">...</a>
    </li>
    <li>
      <a href="...">...</a>
    </li>
    <li>
      <a href="...">...</a>
    </li>
    <li>
      <a href="...">...</a>
    </li>
  </ul>
</nav>

CSS

--nav-list-margin: 0;
--nav-item-margin: 1rem 0;
--nav-item-padding: 0;
--nav-inline-item-margin: 0 1rem;

To display navigaiton inline add the nav-inline class to the <nav> element.

HTML

<nav class="nav-inline">
  <ul>
    <li>
      <a href="...">...</a>
    </li>
    <li>
      <a href="...">...</a>
    </li>
    <li>
      <a href="...">...</a>
    </li>
    <li>
      <a href="...">...</a>
    </li>
  </ul>
</nav>

CSS

--nav-inline-item-margin: 0 1rem;

Related