Tree View

There are no notes for this item.

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

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

                    <button type="button">Introductie</button>

                    <ul>

                        <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>

                    </ul>

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

                    <button type="button">Versies</button>

                    <ul>

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

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

                            </li>

                        </ul>

                    </ul>

                </li>

            </ul>

        </li>

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

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

                    <button type="button">Grid</button>

                    <ul>

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

                                <button type="button">Bootstrap</button>

                                <ul>

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

                                            <button type="button">Herkomst</button>

                                            <ul>

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

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

                                                    </li>

                                                </ul>

                                            </ul>

                                        </li>

                                    </ul>

                                </ul>

                            </li>

                        </ul>

                    </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 leaves(items) %}
  
    
    {%- for item in items -%}
      
  • 
        {% if item.items %}
          
        {% else %}
          {{- item.label -}}
        {% endif %}
        {% if item.items %}
          
      
            {{ leaves(item.items) }}
          
    
        {% endif %}
      
    • 
    {% endfor %}
  

{% endmacro %}


navs:
  - label: Documentatie
    items:
      - label: Introductie
        items:
          - label: Voor ontwerpers
          - label: Voor ontwikkelaars
            active: true
          - label: Toegankelijkheid
      - label: Versies
        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