Missouri State University Pattern Library

Side navigation

There are no notes for this item.

<nav class="navigation-side" aria-label="Site Navigation" role="navigation">
    <div class="skip-nav">
        <a href="#ContentColumn" class="item hidden">Skip to content column</a>
    </div>
    <button id="toggle" class="toggle" aria-expanded="false" aria-controls="container"><span class="headline">Menu</span><svg class="arrow" width="16" height="11" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M14.12 0.786666667L8 6.89333333 1.88 0.786666667 0 2.66666667 8 10.6666667 16 2.66666667z" /></svg>
  </button>
    <div id="container" class="container">
        <div class="local">
            <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>
        </div>
        <div class="global">
            <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>
        </div>
    </div>
</nav>
<script async src="../../scripts/components/side-nav.js"></script>
 
<nav class="navigation-side" aria-label="Site Navigation" role="navigation">
  <div class="skip-nav">
    <a href="#ContentColumn" class="item hidden">Skip to content column</a>
  </div>
  <button id="toggle" class="toggle" aria-expanded="false" aria-controls="container"><span class="headline">Menu</span><svg class="arrow" width="16" height="11" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M14.12 0.786666667L8 6.89333333 1.88 0.786666667 0 2.66666667 8 10.6666667 16 2.66666667z" /></svg>
  </button>
  <div id="container" class="container">
    {{#if local}}
      <div class="local">
        {{> @navigation local}}
      </div>
    {{/if}}
    {{#if global}}
      <div class="global">
        {{> @navigation global}}
      </div>
    {{/if}}
    {{#if social}}
      <div class="widget">
        {{> @social social}}
      </div>
    {{/if}}
  </div>
</nav>
<script async src="{{path '/scripts/components/side-nav.js'}}"></script>
 
{
  "local": {
    "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": "#"
          }
        ]
      }
    ]
  },
  "global": {
    "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": "#"
          }
        ]
      }
    ]
  }
}