Missouri State University Pattern Library

Navigation

There are no notes for this item.

<nav class="navigation" aria-label="Navigation">
    <div class="nav-section">
        <h2 class="headline">Sample headline</h2>
        <ul>
            <li>
                <a href="#">Sample link</a>
            </li>
            <li>
                <a href="#">Sample link</a>
            </li>
            <li>
                <a href="#">Sample link</a>
            </li>
            <li>
                <a href="#">Sample link</a>
            </li>
            <li>
                <a href="#">Sample link</a>
            </li>
        </ul>
    </div>
</nav>
 
<nav class="navigation{{#if class}} {{class}}{{/if}}" aria-label="Navigation">
  {{#each section}}
    <div class="nav-section">
      <h2 class="headline">{{headline}}</h2>
      <ul>
        {{#each link}}
          <li>
            {{#> container}}
              <a href="{{url}}">{{label}}</a>
            {{/container}}
          </li>
        {{/each}}
      </ul>
    </div>
  {{/each}}
</nav>
 
{
  "class": null,
  "section": [
    {
      "headline": "Sample headline",
      "link": [
        {
          "label": "Sample link",
          "url": "#"
        },
        {
          "label": "Sample link",
          "url": "#"
        },
        {
          "label": "Sample link",
          "url": "#"
        },
        {
          "label": "Sample link",
          "url": "#"
        },
        {
          "label": "Sample link",
          "url": "#"
        }
      ]
    }
  ]
}