Menu

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="">
        Tillie Hammond
      </a>
  </li>
  <li class="Menu-cell u-md-size1of2">
    <a class="Menu-item" href="">
        Douglas Ingram
      </a>
  </li>
  <li class="Menu-cell u-md-size1of2">
    <a class="Menu-item" href="">
        Olga Norman
      </a>
  </li>
  <li class="Menu-cell u-md-size1of2">
    <a class="Menu-item" href="">
        Grace Thornton
      </a>
  </li>
  <li class="Menu-cell u-md-size1of2">
    <a class="Menu-item" href="">
        Brent Cross
      </a>
  </li>
  <li class="Menu-cell u-md-size1of2">
    <a class="Menu-item" href="">
        Adele Blair
      </a>
  </li>
</ul>

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="#">
      Martha Dean
    </a>
  </li>
  <li class="Menu-cell">
    <a class="Menu-item"

      href="#">
      Anne Robertson
    </a>
  </li>
  <li class="Menu-cell">
    <a class="Menu-item"
      aria-current="page"
      href="#">
      Devin Simon
    </a>
  </li>
  <li class="Menu-cell">
    <a class="Menu-item"

      href="#">
      Tommy Ryan
    </a>
  </li>
  <li class="Menu-cell">
    <a class="Menu-item"

      href="#">
      Willie Santiago
    </a>
  </li>
  <li class="Menu-cell">
    <a class="Menu-item"

      href="#">
      Nathan Gill
    </a>
  </li>
</ul>

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="">
        Mamie Allison
      </a>
    <ul class="Menu Menu--nested">
      <li class="Menu-cell">
        <a class="Menu-item" href="">
              Cordelia Willis
            </a>
      </li>
      <li class="Menu-cell">
        <a class="Menu-item" href="">
              Mary Logan
            </a>
      </li>
      <li class="Menu-cell">
        <a class="Menu-item" href="">
              Lois Wilson
            </a>
      </li>
    </ul>
  </li>
  <li class="Menu-cell">
    <a class="Menu-item" href="">
        Johanna Malone
      </a>
    <ul class="Menu Menu--nested">
      <li class="Menu-cell">
        <a class="Menu-item" href="">
              Gertrude Wolfe
            </a>
      </li>
      <li class="Menu-cell">
        <a class="Menu-item" href="">
              Katharine Hale
            </a>
      </li>
      <li class="Menu-cell">
        <a class="Menu-item" href="">
              Nicholas Lyons
            </a>
      </li>
    </ul>
  </li>
</ul>

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.

<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="">
          Evan Hammond
        </a>
    </li>
    <li class="Menu-cell u-md-size1of2">
      <a class="Menu-item" href="">
          Ronald Hudson
        </a>
    </li>
    <li class="Menu-cell u-md-size1of2">
      <a class="Menu-item" href="">
          Howard Benson
        </a>
    </li>
    <li class="Menu-cell u-md-size1of2">
      <a class="Menu-item" href="">
          Daniel Knight
        </a>
    </li>
    <li class="Menu-cell u-md-size1of2">
      <a class="Menu-item" href="">
          Philip Bryan
        </a>
    </li>
    <li class="Menu-cell u-md-size1of2">
      <a class="Menu-item" href="">
          Belle Howell
        </a>
    </li>
  </ul>
</div>

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%231B75BC%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23dcedfa%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">
          Winifred Reynolds
        </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%231B75BC%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23dcedfa%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">
          Mitchell Weber
        </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%231B75BC%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23dcedfa%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">
          Lida Lynch
        </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%231B75BC%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23dcedfa%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">
          Adelaide Allison
        </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%231B75BC%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23dcedfa%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">
          Helena Reid
        </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%231B75BC%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23dcedfa%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">
          Lucille Gregory
        </span>
      </a>
  </li>
</ul>