IOP Nucleus

Default 

<nav class="iop-side-nav" data-toggle-target="side-nav">
    <h5 class="iop-side-nav__title">IOP Kings Cross</h5>
    <ul>

        <li>
            <a href="#0" class="">
          About Kings Cross
        </a>
        </li>

        <li>
            <a href="#0" class="">
          Family Day Out
        </a>
        </li>

        <li>
            <a href="#0" class="is-active">
          How To Get Here
        </a>
        </li>

        <li>
            <a href="#0" class="">
          Info &amp; Parking
        </a>
        </li>

        <li>
            <a href="#0" class="">
          What’s On
        </a>
        </li>

    </ul>

    <span role="button" tabindex="0" aria-pressed="false" class="iop-side-nav__toggle-button" data-toggle="side-nav">
    Toggle menu
  </span>
</nav>
 
<nav class="iop-side-nav" data-toggle-target="side-nav">
  <h5 class="iop-side-nav__title">{{ title }}</h5>
  <ul>
    {% for link in links %}
      <li>
        <a href="{{ link.url }}" class="{{ 'is-active' if link.active }}">
          {{ link.label }}
        </a>
      </li>
    {% endfor %}
  </ul>

  <span
    role="button"
    tabindex="0"
    aria-pressed="false"
    class="iop-side-nav__toggle-button"
    data-toggle="side-nav"
  >
    Toggle menu
  </span>
</nav>
 
{
  "title": "IOP Kings Cross",
  "links": [
    {
      "label": "About Kings Cross",
      "url": "#0"
    },
    {
      "label": "Family Day Out",
      "url": "#0"
    },
    {
      "label": "How To Get Here",
      "url": "#0",
      "active": true
    },
    {
      "label": "Info &amp; Parking",
      "url": "#0"
    },
    {
      "label": "What’s On",
      "url": "#0"
    }
  ]
}

There are no notes for this item.