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="">
Martin Buchanan
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Bess Gilbert
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Cornelia Moore
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Troy McDaniel
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Adele Mendez
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Jorge Howard
</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="#">
Carlos Christensen
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item"
href="#">
Rose Hernandez
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item"
aria-current="page"
href="#">
Bryan Pratt
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item"
href="#">
Mattie Lynch
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item"
href="#">
Chris Roberts
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item"
href="#">
Bettie Gonzales
</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="">
Mary Hopkins
</a>
<ul class="Menu Menu--nested">
<li class="Menu-cell">
<a class="Menu-item" href="">
Louis Hansen
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item" href="">
Hallie Roy
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item" href="">
Norman Stewart
</a>
</li>
</ul>
</li>
<li class="Menu-cell">
<a class="Menu-item" href="">
Eula Jenkins
</a>
<ul class="Menu Menu--nested">
<li class="Menu-cell">
<a class="Menu-item" href="">
Jesus McGuire
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item" href="">
Lois Stephens
</a>
</li>
<li class="Menu-cell">
<a class="Menu-item" href="">
Lizzie Mason
</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="">
Glenn Lane
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Francis Hunt
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Sophie Myers
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Adeline Sullivan
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Blanche Gilbert
</a>
</li>
<li class="Menu-cell u-md-size1of2">
<a class="Menu-item" href="">
Clara Hogan
</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">
Aiden Cannon
</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">
Calvin Reed
</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 Harper
</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">
Stephen West
</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">
Addie Cook
</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">
Gerald Rogers
</span>
</a>
</li>
</ul>