Front W - Pattern Library

Subnav 

<nav id="menu-subnav" class="subnav" id="subnav">
    <button type="button" data-controller="disclosure" data-target="#subnav" aria-expanded="false" aria-controls="subnav" class="btn subnav__toggle">
        <svg class="icon" aria-hidden="true" focusable="false" width="16" height="16">
            <use xlink:href="/assets/icons.svg#i-menu" />
        </svg>
        <span>Unterseiten anzeigen</span>
    </button>
    <div class="subnav__collapse collapse" id="subnav">
        <ul class="subnav__items">
            <li class="subnav__item active">
                <a href="#" class="subnav__link">Item 1</a>

            </li>
            <li class="subnav__item has-children">
                <a href="#" class="subnav__link">Item 2</a>

                <button data-controller="disclosure" data-target="#sub2" aria-expanded="false" aria-controls="sub2">
                    <svg class="icon" aria-hidden="true" focusable="false" width="16" height="16">
                        <use xlink:href="/assets/icons.svg#i-drop_down" />
                    </svg>
                    <span class="visually-hidden">Untermenü für Item 2 anzeigen</span>
                </button>
                <ul class="collapse" data-parent="#subnav" id="sub2">
                    <li>
                        <a href="#" class="subnav__link">Child Link 1</a>
                    </li>
                    <li>
                        <a href="#" class="subnav__link">Child Link 2</a>
                    </li>
                    <li>
                        <a href="#" class="subnav__link">Child Link 3</a>
                    </li>
                    <li>
                        <a href="#" class="subnav__link">Child Link 4</a>
                    </li>
                </ul>
            </li>
            <li class="subnav__item">
                <a href="#" class="subnav__link">Item 3</a>

            </li>
            <li class="subnav__item">
                <a href="#" class="subnav__link">Item 4</a>

            </li>
            <li class="subnav__item">
                <a href="#" class="subnav__link">Item 5</a>

            </li>
            <li class="subnav__item">
                <a href="#" class="subnav__link">Item 6</a>

            </li>
        </ul>
    </div>
</nav>
 
{% if subnav|length > 0 %}
<nav id="menu-subnav" class="subnav" id="subnav">
  <button type="button" data-controller="disclosure" data-target="#subnav" aria-expanded="false" aria-controls="subnav" class="btn subnav__toggle">
    {% include "@icon" with { 'type': 'i-menu' } %}
    <span>Unterseiten anzeigen</span>
  </button>
  <div class="subnav__collapse collapse" id="subnav">
    <ul class="subnav__items">
      {% for item in subnav %}
      {% set has_children = item.items|length > 0 %}
      <li class="subnav__item{{ item.active ? ' active' }}{{ has_children ? ' has-children' }}">
        <a href="{{item.url}}" class="subnav__link">{{ item.label }}</a>

        {% if has_children %}
          <button data-controller="disclosure" data-target="{{ '#sub' ~ loop.index }}" aria-expanded="{{ item.active ? 'true' : 'false' }}" aria-controls="{{ 'sub' ~ loop.index }}">
            {% include '@icon' with { 'type': 'i-drop_down' } %}
            <span class="visually-hidden">Untermenü für {{ item.label }} anzeigen</span>
          </button>
          <ul class="collapse{{ item.active ? ' show' }}" data-parent="#subnav" id="{{ 'sub' ~ loop.index }}">
            {% for child in item.items %}
            <li>
              <a href="{{ child.url }}" class="subnav__link">{{ child.label }}</a>
            </li>
            {% endfor %}
          </ul>
        {% endif %}
      </li>
      {% endfor %}
    </ul>
  </div>
</nav>
{% endif %}
 
{
  "subnav": [
    {
      "label": "Item 1",
      "url": "#",
      "active": true
    },
    {
      "label": "Item 2",
      "url": "#",
      "items": [
        {
          "label": "Child Link 1",
          "url": "#"
        },
        {
          "label": "Child Link 2",
          "url": "#"
        },
        {
          "label": "Child Link 3",
          "url": "#"
        },
        {
          "label": "Child Link 4",
          "url": "#"
        }
      ]
    },
    {
      "label": "Item 3",
      "url": "#"
    },
    {
      "label": "Item 4",
      "url": "#"
    },
    {
      "label": "Item 5",
      "url": "#"
    },
    {
      "label": "Item 6",
      "url": "#"
    }
  ]
}