{% from 'macros/icon.html' import Icon %}

<ul class="c-nav c-nav--vertical c-nav--accordion" data-module="Nav" style="max-width: 200px;">
  <li class="c-nav__item is-accordion-nav-parent">
    <a href="#" class="c-nav__link">Item 1</a>
    <button class="c-button is-accordion-button">
      <span class="o-icon o-icon--chevron-down">
        {{Icon('chevron-down')}}
      </span>
    </button>
    <ul class="c-nav is-accordion-nav c-nav--vertical">
      <li class="c-nav__item">
        <a href="#" class="c-nav__link">Item 1 - 1</a>
      </li>
      <li class="c-nav__item">
        <a href="#" class="c-nav__link">Item 1 - 2</a>
      </li>
      <li class="c-nav__item">
        <a href="#" class="c-nav__link">Item 1 - 3</a>
      </li>
    </ul>
  </li>
  <li class="c-nav__item">
    <a href="#" class="c-nav__link">Item 2</a>
  </li>
  <li class="c-nav__item">
    <a href="#" class="c-nav__link">Item 3</a>
  </li>
</ul>