Research Basic

{#
	{% include '@navigation-basic' with {
		class: 'class',
		modifier: 'modifier',
		title: 'Title',
		active_index: '',
		links: [{ 'title': 'Page Title', 'url': '#', 'icon': '', theme: '', 'children': [] }],
		icon: 'icon_item',
		color_pattern: color_patterns.ternary,
		child_icon: 'icon_child'
	} %}
#}

{% set id = uniqid('basic_nav_title') %}

<nav class="{{ class }}_nav{% if modifier %} {{ class }}_nav_{{ modifier }}{% endif %}" aria-labelledby="{{ id }}">
	{% if title %}
		<div class="{{ class }}_nav_header">
			<h2 class="{{ class }}_nav_title" id="{{ id }}">{{ title }}</h2>
		</div>
	{% endif %}

	<ul class="{{ class }}_nav_list" aria-labelledby="{{ id }}">
		{% for link in links %}
			{% set theme = color_pattern|length ? get_theme_key(color_pattern|default([]), loop.index0) : "default" %}

			<li class="{{ class }}_nav_item{% if link.children %} has_children{% endif %}{% if loop.index == active_index %} active{% endif %} theme_{{ theme }} {% if link.is_archive %} is_archive{% endif %}">
				<a class="{{ class }}_nav_link{% if loop.index == active_index %} active{% endif %} {% if link.theme %}theme_{{ link.theme }}{% endif %}" href="{{ link.url ?: '#' }}" {% if loop.index == active_index %} aria-current="page" {% endif %}>
					<div class="{{ class }}_nav_link_inner">
						{% if link.icon %}
							<span class="{{ class }}_nav_link_icon" aria-hidden="true">{{ icon(link.icon) }}</span>
						{% endif %}
						<span class="{{ class }}_nav_link_label">{{ link.title ?: link }}</span>
					</div>
				</a>

				{% if link.children %}
					<ul class="{{ class }}_nav_children" aria-label="{{ link.title ?: link }}">
						{% for child in link.children %}
							<li class="{{ class }}_nav_child_item {% if child.is_archive %} is_archive{% endif %}">
								<a class="{{ class }}_nav_child_link" href="{{ child.url ?: '#' }}">
									<div class="{{ class }}_nav_child_link_inner">
										{% if child_icon %}
											<span class="{{ class }}_nav_child_link_icon" aria-hidden="true">{{ icon(child_icon) }}</span>
										{% endif %}
										<span class="{{ class }}_nav_child_link_label">{{ child.title ?: child }}</span>
									</div>
								</a>
							</li>
						{% endfor %}
					</ul>
				{% endif %}
			</li>

			{% if loop.last %}
				<li class="{{ class }}_nav_item {{ js_class }}-nav-item-{{ loop.index }} is_archive">
					<a class="{{ class }}_nav_link" href="{{ archive_link }}">
						<div class="{{ class }}_nav_link_inner">
							<span class="{{ class }}_nav_link_icon" aria-hidden="true">{{ icon('arrow_right_long') }}</span>
							<span class="{{ class }}_nav_link_label">All
								{{ title }}</span>
						</div>
					</a>
				</li>
			{% endif %}

		{% endfor %}
	</ul>
</nav>