Crispus

Secondary Nav: Centered 

<nav class="nv-s nv-s--c">
    <input type="checkbox" id="nv-s-tr" class="nv-s-tr" aria-hidden="true">

    <ul class="nv-s-l">
        <li class="nv-s-l-i">
            <label for="nv-s-tr" class="nv-s-l-b" type="button">Navigation</label>
        </li>

        <li class="nv-s-l-i"><a href="https://311.boston.gov/" title="Report a Problem" class="nv-s-l-a nv-s-l-a--active">Report a Problem</a></li>
        <li class="nv-s-l-i"><a href="https://311.boston.gov/lookup" title="Case Look Up" class="nv-s-l-a">Case Look Up</a></li>
        <li class="nv-s-l-i"><a href="https://311.boston.gov/onthego" title="311 on the Go" class="nv-s-l-a">311 on the Go</a></li>
        <li class="nv-s-l-i"><a href="https://311.boston.gov/faq" title="FAQ" class="nv-s-l-a">FAQ</a></li>
    </ul>
</nav>
 
<nav class="nv-s{{#if theme}} nv-s--{{theme}}{{/if}}">
  <input type="checkbox" id="nv-s-tr" class="nv-s-tr" aria-hidden="true">

  <ul class="nv-s-l">
    <li class="nv-s-l-i">
      <label for="nv-s-tr" class="nv-s-l-b" type="button">Navigation</label>
    </li>

    {{#each links as |link|}}
      <li class="nv-s-l-i"><a href="{{ link.href }}" title="{{ link.name }}" class="nv-s-l-a{{#if link.active}} nv-s-l-a--active{{/if}}">{{ link.name }}</a></li>
    {{/each}}
  </ul>
</nav>
 
{
  "links": [
    {
      "name": "Report a Problem",
      "href": "https://311.boston.gov/",
      "active": true
    },
    {
      "name": "Case Look Up",
      "href": "https://311.boston.gov/lookup"
    },
    {
      "name": "311 on the Go",
      "href": "https://311.boston.gov/onthego"
    },
    {
      "name": "FAQ",
      "href": "https://311.boston.gov/faq"
    }
  ],
  "theme": "c"
}

There are no notes for this item.