Navbars

Navbars:

There are two navbars available, a horizontal navbar and a vertical navbar.

Horizontal navbar:

Atom Prefix:

horizontal-nav

HTML Code:

<header class="head sticky-top">
  <nav class="flexRow">
    <ul class="flexRow flexCenter flexStart brand">
      <li><a href="index.html">Brand Name</a></li>
      <li class="flexEnd"><button aria-pressed="false" aria-controls="menu toggle button" id="toggle">&#9776;</button></li>
    </ul>
    <ul class="flexRow flexCenter flexEnd links-hover"  aria-expanded="true">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </nav>
</header>

Large Screen Example:
Mobile Example:

---

Vertical navbar:

Atom Prefix:

vertical-nav

HTML Code:

<aside class="sidebar-right">
  <nav class="flexCol vertical-nav" aria-labelledby="title1">
    <header id="title1">Title</header>
    <ul class="flexCol flexCenter links-hover">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </nav>
</aside>

Large Screen Example:

Mobile Example: