tree-nav

Information

Folder
src/components/patterns/tree-nav

Files

Schema
Mocks
Template
// src/components/patterns/tree-nav/tree-nav.twig

{% import _self as self %}

{% macro list(items, level) %}
	<ol class="TreeNav-list TreeNav-list--level{{ level }}">
		{% for item in items %}
			<li class="TreeNav-item">
				<a
					class="
						TreeNav-link
						TreeNav-link--level{{ level }}
						{% if item.is_active %}u-link{% else %}u-linkHover{% endif %}
					"
					href="{{ item.url }}"
					{% if item.is_active %}aria-current="page"{% endif %}
				>
					{{ item.title }}
				</a>

				{% if item.below %}
					{{ self.list(item.below, level + 1) }}
				{% endif %}
			</li>
		{% endfor %}
	</ol>
{% endmacro %}

<nav class="TreeNav" aria-label="{{ label }}">
	{{ self.list(items, 1) }}
</nav>

Variants

default
Open

default mock data

Raw
Resolved