Tree View

Component preview

<nav class="dso-tree-view">
    <ul>
        <li>
            <h2 class="dso-tree-view-subhead">Documentatie</h2>

            <ul>
                <li class="dso-collection">

                    <h3><button type="button" aria-expanded="true">Introductie</button></h3>

                    <ul>
                        <li class="dso-entity">

                            <a href="#">Voor ontwerpers</a>

                        </li>
                        <li class="dso-entity dso-is-current">

                            <a href="#">Voor ontwikkelaars</a>

                        </li>
                        <li class="dso-entity">

                            <a href="#">Toegankelijkheid</a>

                        </li>

                    </ul>

                </li>
                <li class="dso-collection is-closed">

                    <h3><button type="button" aria-expanded="false">Versies</button></h3>

                    <ul>
                        <li class="dso-entity">

                            <a href="#">Alle versies</a>

                        </li>

                    </ul>

                </li>

            </ul>

        </li>

        <li>
            <h2 class="dso-tree-view-subhead">Fundament</h2>

            <ul>
                <li class="dso-collection">

                    <h3><button type="button" aria-expanded="true">Grid</button></h3>

                    <ul>
                        <li class="dso-collection">

                            <h3><button type="button" aria-expanded="true">Bootstrap</button></h3>

                            <ul>
                                <li class="dso-collection">

                                    <h3><button type="button" aria-expanded="true">Herkomst</button></h3>

                                    <ul>
                                        <li class="dso-entity">

                                            <a href="#">Overwegingen</a>

                                        </li>

                                    </ul>

                                </li>

                            </ul>

                        </li>

                    </ul>

                </li>
                <li class="dso-entity">

                    <a href="#">Kleuren</a>

                </li>
                <li class="dso-entity">

                    <a href="#">Logo / favicon</a>

                </li>
                <li class="dso-entity">

                    <a href="#">Typografie</a>

                </li>

            </ul>

        </li>

        <li>
            <h2 class="dso-tree-view-subhead">Componenten</h2>

            <ul>
                <li class="dso-entity">

                    <a href="#">Accordion</a>

                </li>
                <li class="dso-entity">

                    <a href="#">Alerts</a>

                </li>
                <li class="dso-entity">

                    <a href="#">Badge</a>

                </li>
                <li class="dso-entity">

                    <a href="#">Breadcrumbs</a>

                </li>
                <li class="dso-entity">

                    <a href="#">Buttons</a>

                </li>
                <li class="dso-entity">

                    <a href="#">Conclusion</a>

                </li>

            </ul>

        </li>

        <li>
            <h2 class="dso-tree-view-subhead">Voorbeelden</h2>

            <ul>
                <li class="dso-entity">

                    <a href="#">Aanvragen</a>

                </li>
                <li class="dso-entity">

                    <a href="#">Aanvragen upload bestanden</a>

                </li>
                <li class="dso-entity">

                    <a href="#">Accordion label</a>

                </li>

            </ul>

        </li>

    </ul>
</nav>

{% macro branches(items) %}
  {% if items.length %}
    <ul>
      {%- for item in items -%}
        <li {{ className('dso-collection' if item.items else 'dso-entity', [item.active, 'dso-is-current'], [item.collapsed, 'is-closed']) }} >
          {% if not item.items %}
            <a href="#">{{- item.label -}}</a>
          {% else %}
            <h3><button type="button" aria-expanded="{{ not item.collapsed }}">{{- item.label -}}</button></h3>
            {{ branches(item.items) }}
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}

<nav class="dso-tree-view">
  <ul>
    {%- for nav in navs %}
      <li>
        <h2 class="dso-tree-view-subhead">{{ nav.label }}</h2>
        {{ branches(nav.items) }}
      </li>
    {% endfor %}
  </ul>
</nav>

navs:
  - label: Documentatie
    items:
      - label: Introductie
        items:
          - label: Voor ontwerpers
          - label: Voor ontwikkelaars
            active: true
          - label: Toegankelijkheid
      - label: Versies
        collapsed: true
        items:
          - label: Alle versies
  - label: Fundament
    items:
      - label: Grid
        items:
          - label: Bootstrap
            items:
              - label: Herkomst
                items:
                  - label: Overwegingen
      - label: Kleuren
      - label: Logo / favicon
      - label: Typografie
  - label: Componenten
    items:
      - label: Accordion
      - label: Alerts
      - label: Badge
      - label: Breadcrumbs
      - label: Buttons
      - label: Conclusion
  - label: Voorbeelden
    items:
      - label: Aanvragen
      - label: Aanvragen upload bestanden
      - label: Accordion label