Front W - Pattern Library

Sidenav 

<nav class="sidenav">

    <div class="sidenav__content" id="sidenav">
        <h3 class="h4 sidenav__title"><a href="#">Parent Label</a></h3>
        <ul class="sidenav__menu">
            <li class="sidenav__item">
                <a href="#" class="sidenav__link">Item 1</a>
            </li>
            <li class="sidenav__item is-active">
                <a href="#" class="sidenav__link">Item 2</a>
                <ul class="sidenav__menu">
                    <li class="sidenav__item">
                        <a href="#" class="sidenav__link">Submenu 1</a>
                    </li>
                    <li class="sidenav__item">
                        <a href="#" class="sidenav__link">Submenu 2</a>
                        <ul class="sidenav__menu">
                            <li class="sidenav__item">
                                <a href="#" class="sidenav__link">Submenu 1</a>
                            </li>
                            <li class="sidenav__item">
                                <a href="#" class="sidenav__link">Submenu 2</a>
                            </li>
                            <li class="sidenav__item">
                                <a href="#" class="sidenav__link">Submenu 3</a>
                            </li>
                        </ul>
                    </li>
                    <li class="sidenav__item">
                        <a href="#" class="sidenav__link">Submenu 3</a>
                    </li>
                </ul>
            </li>
            <li class="sidenav__item">
                <a href="#" class="sidenav__link">Item 3</a>
                <ul class="sidenav__menu">
                    <li class="sidenav__item">
                        <a href="#" class="sidenav__link">Submenu 1</a>
                    </li>
                    <li class="sidenav__item">
                        <a href="#" class="sidenav__link">Submenu 2</a>
                    </li>
                    <li class="sidenav__item">
                        <a href="#" class="sidenav__link">Submenu 3</a>
                    </li>
                    <li class="sidenav__item">
                        <a href="#" class="sidenav__link">Submenu 4</a>
                    </li>
                </ul>
            </li>
            <li class="sidenav__item">
                <a href="#" class="sidenav__link">Item 4</a>
            </li>
        </ul>
    </div>
</nav>
 
<nav class="sidenav">
  {# <button class="btn btn--expanded sidenav__toggle" data-controller="disclosure" aria-controls="sidenav" aria-expanded="true">In diesem Bereich</button> #}
  <div class="sidenav__content" id="sidenav">
    {% if nav_parent is defined %}
    <{{ nav_parent.heading_level }} class="h4 sidenav__title"><a href="{{ nav_parent.url }}">{{ nav_parent.label }}</a></{{ nav_parent.heading_level }}>
    {% endif %}
    <ul class="sidenav__menu">
      {% for item in nav_menu %}
      <li class="sidenav__item{{ item.active ? ' is-active' }}">
        <a href="{{ item.url }}" class="sidenav__link">{{ item.label }}</a>
        {% if item.items %}
        <ul class="sidenav__menu">
          {% for child in item.items %}
            <li class="sidenav__item">
              <a href="{{ child.url }}" class="sidenav__link">{{ child.label }}</a>
              {% if child.items %}
              <ul class="sidenav__menu">
                {% for orphan in child.items %}
                  <li class="sidenav__item">
                    <a href="{{ orphan.url }}" class="sidenav__link">{{ orphan.label }}</a>
                  </li>
                {% endfor %}
              </ul>
            {% endif %}
            </li>
          {% endfor %}
        </ul>
        {% endif %}
      </li>
      {% endfor %}
    </ul>
  </div>
</nav>
 
{
  "nav_parent": {
    "heading_level": "h3",
    "label": "Parent Label",
    "url": "#"
  },
  "nav_menu": [
    {
      "label": "Item 1",
      "url": "#"
    },
    {
      "label": "Item 2",
      "url": "#",
      "active": true,
      "items": [
        {
          "label": "Submenu 1",
          "url": "#"
        },
        {
          "label": "Submenu 2",
          "url": "#",
          "items": [
            {
              "label": "Submenu 1",
              "url": "#"
            },
            {
              "label": "Submenu 2",
              "url": "#"
            },
            {
              "label": "Submenu 3",
              "url": "#"
            }
          ]
        },
        {
          "label": "Submenu 3",
          "url": "#"
        }
      ]
    },
    {
      "label": "Item 3",
      "url": "#",
      "items": [
        {
          "label": "Submenu 1",
          "url": "#"
        },
        {
          "label": "Submenu 2",
          "url": "#"
        },
        {
          "label": "Submenu 3",
          "url": "#"
        },
        {
          "label": "Submenu 4",
          "url": "#"
        }
      ]
    },
    {
      "label": "Item 4",
      "url": "#"
    }
  ]
}