<h3>Horizontal menu, reverse ordered</h3>
<nav class="c-nav c-nav--start c-nav--horizontal-reverse" aria-label="Navigation Example Horizontal - Reversed">
<ul class="c-nav__list" role="menubar">
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="One">One</a>
</li>
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link c-nav__link--current" aria-current="page" title="Two">Two</a>
</li>
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="Three">Three</a>
</li>
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="Four, this is a longer list this time">Four, this is a longer list this time</a>
</li>
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link c-nav__link--disabled" title="Five">Five</a>
</li>
</ul>
</nav>
<h3>{{ singletitle }}</h3>
<nav class="c-nav{{ modifier }}" aria-label="Navigation Example {{ identifier }}">
<ul class="c-nav__list" role="menubar">
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="One">One</a>
</li>
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link c-nav__link--current" aria-current="page" title="Two">Two</a>
</li>
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="Three">Three</a>
</li>
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link" title="Four, this is a longer list this time">Four, this is a longer list this time</a>
</li>
<li class="c-nav__list-element" role="none">
<a href="#" role="menuitem" class="c-nav__link c-nav__link--disabled" title="Five">Five</a>
</li>
</ul>
</nav>
{
"name": "Default",
"modifier": " c-nav--start c-nav--horizontal-reverse",
"singletitle": "Horizontal menu, reverse ordered",
"identifier": "Horizontal - Reversed"
}
There are no notes for this item.