Children and Screens Component Library

Basic 

<nav class="secondary_nav secondary_nav_demo" aria-labelledby="basic_nav_title-1">
    <div class="secondary_nav_header">
        <h2 class="secondary_nav_title" id="basic_nav_title-1">Basic</h2>
    </div>
    <ul class="secondary_nav_list" aria-labelledby="basic_nav_title-1">

        <li class="secondary_nav_item theme_default">
            <a class="secondary_nav_link theme_medium_blue" href="#">
                <div class="secondary_nav_link_inner">
                    <span class="secondary_nav_link_icon" aria-hidden="true">
                        <svg class="icon icon_mail">
                            <use href="/images/icons.svg#mail" />
                        </svg>
                    </span>
                    <span class="secondary_nav_link_label">Contact</span>
                </div>
            </a>

        </li>

        <li class="secondary_nav_item theme_default">
            <a class="secondary_nav_link theme_salmon" href="#">
                <div class="secondary_nav_link_inner">
                    <span class="secondary_nav_link_icon" aria-hidden="true">
                        <svg class="icon icon_heart">
                            <use href="/images/icons.svg#heart" />
                        </svg>
                    </span>
                    <span class="secondary_nav_link_label">Donate</span>
                </div>
            </a>

        </li>

        <li class="secondary_nav_item theme_default">
            <a class="secondary_nav_link theme_medium_blue" href="#">
                <div class="secondary_nav_link_inner">
                    <span class="secondary_nav_link_icon" aria-hidden="true">
                        <svg class="icon icon_search">
                            <use href="/images/icons.svg#search" />
                        </svg>
                    </span>
                    <span class="secondary_nav_link_label">Search</span>
                </div>
            </a>

        </li>
    </ul>
</nav>
 
{#
	{% 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 }}">
	<div class="{{ class }}_nav_header">
		<h2 class="{{ class }}_nav_title" id="{{ id }}">{{ title }}</h2>
	</div>
	<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 }}">
				<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">
								<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>
		{% endfor %}
	</ul>
</nav>

No notes defined.