Project Lima pattern lib

Nav Alignment: Horizontal Left Aligned 

<h3>Horizontal menu - left aligned</h3>
<nav class="c-nav c-nav--start" aria-label="Navigation Example Default">
    <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",
  "singletitle": "Horizontal menu - left aligned",
  "identifier": "Default"
}

There are no notes for this item.