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="">
Brett Carroll
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Alice Ramsey
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Raymond Grant
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Paul Newman
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Nellie Richardson
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Linnie Matthews
</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="#">
Lois Rodriguez
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item"
href="#">
Patrick Cain
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item"
aria-current="page"
href="#">
Cornelia Maldonado
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item"
href="#">
Loretta Lopez
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item"
href="#">
Leona French
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item"
href="#">
Harold Myers
</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="">
Clarence Higgins
</a>
<ul class="Menu Menu--nested">
<li class="Menu-cell">
<a class="Menu-item" href="">
Theodore Taylor
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item" href="">
Andrew Douglas
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item" href="">
Cameron Ferguson
</a>
</li>
</ul>
</li>
<li class="Menu-cell">
<a class="Menu-item" href="">
Mina Buchanan
</a>
<ul class="Menu Menu--nested">
<li class="Menu-cell">
<a class="Menu-item" href="">
Evelyn Edwards
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item" href="">
Alma Hudson
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item" href="">
Myra Ryan
</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="">
Roger Cohen
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Hester May
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Alejandro Parsons
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Alvin Harmon
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Rhoda Lee
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Betty Hampton
</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%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">
Lucille Warren
</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">
Madge Perez
</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">
Clara Leonard
</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">
Shawn Stephens
</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">
Alan Schultz
</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">
Mabel Jennings
</span>
</a>
</li>
</ul>