Style Guide

5.3 #Navigations.Navgroup Navgroup

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