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" aria-expanded="true">
<h3>Introductie</h3>
</button>
<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">
<button type="button" aria-expanded="false">
<h3>Versies</h3>
</button>
<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">
<button type="button" aria-expanded="true">
<h3>Grid</h3>
</button>
<ul>
<li class="dso-collection">
<button type="button" aria-expanded="true">
<h3>Bootstrap</h3>
</button>
<ul>
<li class="dso-collection">
<button type="button" aria-expanded="true">
<h3>Herkomst</h3>
</button>
<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 %}
<button type="button" aria-expanded="{{ not item.collapsed }}"><h3>{{- item.label -}}</h3></button>
{{ 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