<h3>Vertical menu, reverse ordered</h3>
<nav class="c-nav c-nav--vertical-reverse" aria-label="Navigation Example Vertical - 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--vertical-reverse",
  "singletitle": "Vertical menu, reverse ordered",
  "identifier": "Vertical - Reversed"
}

There are no notes for this item.