Style Guide

5 #Navigations Navigations

5.1 #Navigations.Mainnav Mainnav

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Example
Markup 
<nav class="mainnav">
  <ul>
    <li class="is-active">
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
  </ul>
  <span class="mainnav__seperator"></span>
  <ul>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
  </ul>
</nav>
Source: build/doc/doc.css, line 13737

5.2 #Navigations.Nav Nav

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Example
Markup 
<nav class="nav">
  <ul>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
    <li>
      <a href="#">Level 1</a>
    </li>
  </ul>
</nav>
Source: build/doc/doc.css, line 13321

5.3 #Navigations.Navgroup Navgroup

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Examples
Default styling
.navgroup--col-2
2 Columns
.navgroup--col-3
3 Columns
.navgroup--col-4
4 Columns
.navgroup--col-5
5 Columns
.navgroup--collapse-mobile
Collapse Mobile
Markup 
<nav class="navgroup [modifier class]">
  <ul>
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
      </ul>
    </li>
    <li class="is-active-tree">
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li class="is-active">
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
Source: build/doc/doc.css, line 13573

5.4 #Navigations.Subnav Subnav

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Example
Markup 
<nav class="subnav">
  <ul>
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
          <ul>
            <li>
              <a href="#">Level 3</a>
            </li>
            <li>
              <a href="#">Level 3</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="is-active">
      <a href="#">Level 1</a>
      <ul>
        <li class="is-active">
          <a class="is-active" href="#">Level 2</a>
          <ul>
            <li>
              <a href="#">Level 3</a>
            </li>
            <li>
              <a href="#">Level 3</a>
            </li>
          </ul>
        </li>
        <li class="active">
          <a href="#" class="is-active">Level 2</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Level 1</a>
      <ul>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
        <li>
          <a href="#">Level 2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
Source: build/doc/doc.css, line 13452

5.5 #Navigations.Toggle Navigation Toggle Navigation

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Examples
Default styling
.is-active
Active Class
Markup 
<div class="navToggler [modifier class]">
  <div class="navToggler__bar"></div>
  <div class="navToggler__bar"></div>
  <div class="navToggler__bar"></div>
</div>
Source: build/doc/doc.css, line 13249