Use the menu component to create styled lists of links used for navigation.
When the container is shorter than the text of a menu link the text will be truncated.
The
menucomponent is an optional mixin within Fozzie — if you'd like to use it in your project you can include it by adding@include menu();into your SCSS dependencies file.
Be sure to wrap your menu components in a <nav> element to aid assistive technologies in identifying the menu. If you have more than one menu component on a page add an aria-labelledby attribute and target an element (via its ID) in order to describe the intent of the menu.
<div class="g">
<div class="g-col g-span12 g-span6--narrow g-span3--mid">
<nav aria-labelledby="example-1" class="">
<h2 class="is-visuallyHidden" id="example-1">Categories</h2>
<ul class="c-menu " data-category-menu>
<li class="c-menu-item ">
<a href="#cat0" class="c-menu-link c-menu-link--active">Popular</a>
</li>
<li class="c-menu-item">
<a href="#cat1" class="c-menu-link">Category 1</a>
</li>
<li class="c-menu-item">
<a href="#cat2" class="c-menu-link">Category 2</a>
</li>
<li class="c-menu-item ">
<a href="#cat3" class="c-menu-link">Category 3 has a really really long title</a>
</li>
<li class="c-menu-item">
<a href="#cat4" class="c-menu-link">Category 4</a>
</li>
<li class="c-menu-item">
<a href="#cat5" class="c-menu-link">Category 5</a>
</li>
<li class="c-menu-item">
<a href="#cat6" class="c-menu-link">Category 6</a>
</li>
<li class="c-menu-item">
<a href="#cat7" class="c-menu-link">Category 7</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="g">
<div class="g-col g-span12 g-span6--narrow g-span3--mid">
<nav aria-labelledby="example-2" class="">
<h2 class="is-visuallyHidden" id="example-2">Categories</h2>
<ul class="c-menu c-menu--condensed" data-category-menu>
<li class="c-menu-item ">
<a href="#cat0" class="c-menu-link c-menu-link--active">Popular</a>
</li>
<li class="c-menu-item">
<a href="#cat1" class="c-menu-link">Category 1</a>
</li>
<li class="c-menu-item">
<a href="#cat2" class="c-menu-link">Category 2</a>
</li>
<li class="c-menu-item ">
<a href="#cat3" class="c-menu-link">Category 3 has a really really long title</a>
</li>
<li class="c-menu-item">
<a href="#cat4" class="c-menu-link">Category 4</a>
</li>
<li class="c-menu-item">
<a href="#cat5" class="c-menu-link">Category 5</a>
</li>
<li class="c-menu-item">
<a href="#cat6" class="c-menu-link">Category 6</a>
</li>
<li class="c-menu-item">
<a href="#cat7" class="c-menu-link">Category 7</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="g">
<div class="g-span12 g-span6--narrow g-span3--mid">
<nav aria-labelledby="example-3" class="">
<h2 class="is-visuallyHidden" id="example-3">Categories</h2>
<ul class="c-menu " data-category-menu>
<li class="c-menu-item has-icon">
<a href="#cat0" class="c-menu-link c-menu-link--active">Popular</a>
</li>
<li class="c-menu-item">
<a href="#cat1" class="c-menu-link">Category 1</a>
</li>
<li class="c-menu-item">
<a href="#cat2" class="c-menu-link">Category 2</a>
</li>
<li class="c-menu-item has-icon">
<a href="#cat3" class="c-menu-link">Category 3 has a really really long title</a>
</li>
<li class="c-menu-item">
<a href="#cat4" class="c-menu-link">Category 4</a>
</li>
<li class="c-menu-item">
<a href="#cat5" class="c-menu-link">Category 5</a>
</li>
<li class="c-menu-item">
<a href="#cat6" class="c-menu-link">Category 6</a>
</li>
<li class="c-menu-item">
<a href="#cat7" class="c-menu-link">Category 7</a>
</li>
</ul>
</nav>
</div>
</div>
<nav aria-labelledby="example-4" class="">
<h2 class="is-visuallyHidden" id="example-4">Categories</h2>
<ul class="c-menu c-menu--horizontal" data-category-menu>
<li class="c-menu-item ">
<a href="#cat0" class="c-menu-link c-menu-link--active">Popular</a>
</li>
<li class="c-menu-item">
<a href="#cat1" class="c-menu-link">Category 1</a>
</li>
<li class="c-menu-item">
<a href="#cat2" class="c-menu-link">Category 2</a>
</li>
<li class="c-menu-item ">
<a href="#cat3" class="c-menu-link">Category 3 has a really really long title</a>
</li>
<li class="c-menu-item">
<a href="#cat4" class="c-menu-link">Category 4</a>
</li>
<li class="c-menu-item">
<a href="#cat5" class="c-menu-link">Category 5</a>
</li>
<li class="c-menu-item">
<a href="#cat6" class="c-menu-link">Category 6</a>
</li>
<li class="c-menu-item">
<a href="#cat7" class="c-menu-link">Category 7</a>
</li>
</ul>
</nav>