Menu

Simple

Simple grid-based list of menu items intended for subnavigation. Columns can be controlled using u-size* utilities.

<ul class="Menu">
          <li class="Menu-cell u-md-size1of2">
            <a class="Menu-item" href="">
              Gertrude Franklin
            </a>
          </li>
          <li class="Menu-cell u-md-size1of2">
            <a class="Menu-item" href="">
              Lawrence Bates
            </a>
          </li>
          <li class="Menu-cell u-md-size1of2">
            <a class="Menu-item" href="">
              Lily Daniel
            </a>
          </li>
          <li class="Menu-cell u-md-size1of2">
            <a class="Menu-item" href="">
              Bessie Johnston
            </a>
          </li>
          <li class="Menu-cell u-md-size1of2">
            <a class="Menu-item" href="">
              Isabella Pittman
            </a>
          </li>
          <li class="Menu-cell u-md-size1of2">
            <a class="Menu-item" href="">
              Irene Perkins
            </a>
          </li>
      </ul>

Current Item

It can be helpful to highlight the currently selected item in a menu.

We recommend using the aria-current attribute for this, but if that's not possible you can achieve the same styling with the is-current state class.

<ul class="Menu">
        <li class="Menu-cell">
          <a class="Menu-item"
            
            href="#">
            Isabella Lloyd
          </a>
        </li>
        <li class="Menu-cell">
          <a class="Menu-item"
            
            href="#">
            Lizzie Ward
          </a>
        </li>
        <li class="Menu-cell">
          <a class="Menu-item"
            aria-current="page"
            href="#">
            Timothy Padilla
          </a>
        </li>
        <li class="Menu-cell">
          <a class="Menu-item"
            
            href="#">
            Cole Schneider
          </a>
        </li>
        <li class="Menu-cell">
          <a class="Menu-item"
            
            href="#">
            Sophia Erickson
          </a>
        </li>
        <li class="Menu-cell">
          <a class="Menu-item"
            
            href="#">
            Antonio Moody
          </a>
        </li>
      </ul>

Nested

You can nest Menus inside of other menus. When doing this you should include the Menu--nested modifier on the nested menus.

Theoretically you could create a very deeply nested menu structure, but in practice we don't recommend nesting menus more than 3 levels deep.

This pattern works best with single column menus.

<ul class="Menu">
          <li class="Menu-cell">
            <a class="Menu-item" href="">
              Anne Lloyd
            </a>
            <ul class="Menu Menu--nested">
                <li class="Menu-cell">
                  <a class="Menu-item" href="">
                    Eva Moran
                  </a>
                </li>
                <li class="Menu-cell">
                  <a class="Menu-item" href="">
                    Harriett Herrera
                  </a>
                </li>
                <li class="Menu-cell">
                  <a class="Menu-item" href="">
                    Bradley Mills
                  </a>
                </li>
            </ul>
          </li>
          <li class="Menu-cell">
            <a class="Menu-item" href="">
              Ola Glover
            </a>
            <ul class="Menu Menu--nested">
                <li class="Menu-cell">
                  <a class="Menu-item" href="">
                    Cornelia Summers
                  </a>
                </li>
                <li class="Menu-cell">
                  <a class="Menu-item" href="">
                    Owen Nelson
                  </a>
                </li>
                <li class="Menu-cell">
                  <a class="Menu-item" href="">
                    Aaron Reese
                  </a>
                </li>
            </ul>
          </li>
      </ul>

Flush

By default the menu is horizontally aligned with other page content. If you'd prefer the menu cells to be horizontally aligned with other page content you can achieve this with the Menu--flush modifier.

Use care when using this modifier. It relies on negative margins, so may extend out of its container.

Flush Menu

<div class="u-pad1">
        <h4>Flush Menu</h4>
      
        <ul class="Menu Menu--flush">
            <li class="Menu-cell u-md-size1of2">
              <a class="Menu-item" href="">
                Lela French
              </a>
            </li>
            <li class="Menu-cell u-md-size1of2">
              <a class="Menu-item" href="">
                Ethel Wolfe
              </a>
            </li>
            <li class="Menu-cell u-md-size1of2">
              <a class="Menu-item" href="">
                Allie Padilla
              </a>
            </li>
            <li class="Menu-cell u-md-size1of2">
              <a class="Menu-item" href="">
                Mayme Rhodes
              </a>
            </li>
            <li class="Menu-cell u-md-size1of2">
              <a class="Menu-item" href="">
                Bill Larson
              </a>
            </li>
            <li class="Menu-cell u-md-size1of2">
              <a class="Menu-item" href="">
                Linnie McDaniel
              </a>
            </li>
        </ul>
      </div>

Advanced

A more product-like menu display can be achieved using the optional Menu-object and Menu-label descendants.

<ul class="Menu">
          <li class="Menu-cell u-size1of2 u-md-size1of3 u-lg-size1of4">
            <a class="Menu-item" href="">
              <img class="Menu-object" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
              <span class="Menu-label">
                Myra Sutton
              </span>
            </a>
          </li>
          <li class="Menu-cell u-size1of2 u-md-size1of3 u-lg-size1of4">
            <a class="Menu-item" href="">
              <img class="Menu-object" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
              <span class="Menu-label">
                Douglas Parks
              </span>
            </a>
          </li>
          <li class="Menu-cell u-size1of2 u-md-size1of3 u-lg-size1of4">
            <a class="Menu-item" href="">
              <img class="Menu-object" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
              <span class="Menu-label">
                Jeremy Moran
              </span>
            </a>
          </li>
          <li class="Menu-cell u-size1of2 u-md-size1of3 u-lg-size1of4">
            <a class="Menu-item" href="">
              <img class="Menu-object" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
              <span class="Menu-label">
                Leah Jensen
              </span>
            </a>
          </li>
          <li class="Menu-cell u-size1of2 u-md-size1of3 u-lg-size1of4">
            <a class="Menu-item" href="">
              <img class="Menu-object" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
              <span class="Menu-label">
                Barbara Hanson
              </span>
            </a>
          </li>
          <li class="Menu-cell u-size1of2 u-md-size1of3 u-lg-size1of4">
            <a class="Menu-item" href="">
              <img class="Menu-object" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23116bb1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23c7e4fa%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E%3C%2Ftext%3E%3C%2Fsvg%3E" alt="">
              <span class="Menu-label">
                Sam Chapman
              </span>
            </a>
          </li>
      </ul>