<nav class="secondary
secondary--demo
" id="secondary-1" aria-labelledby="secondary-1__title">
<div class="secondary__header">
<h2 class="secondary__title" id="secondary-1__title">Basic</h2>
</div>
<ul class="secondary__list" aria-labelledby="secondary-1__title">
<li class="
secondary__item
">
<a class="
secondary__item-link
" id="secondary-1__link-1item-link" href="#">
<div class="secondary__item-link-inner">
<span class="secondary__item-link-label">Aenean Massa</span>
</div>
</a>
</li>
<li class="
secondary__item
secondary__item--has-children
secondary__item--is-open
">
<a class="
secondary__item-link
" id="secondary-1__link-2item-link" href="#">
<div class="secondary__item-link-inner">
<span class="secondary__item-link-label">Maecenas</span>
</div>
</a>
<ul class="secondary__children" aria-labelledby="secondary-1__link-2item-link">
<li class="
secondary__child-item
">
<a class="
secondary__child-link
" href="#">
<div class="secondary__child-link-inner">
<span class="secondary__child-link-label">Nam Eget Dui</span>
</div>
</a>
</li>
<li class="
secondary__child-item
secondary__child-item--is-open
">
<a class="
secondary__child-link
secondary__child-link--is-active
" href="#" aria-current="page">
<div class="secondary__child-link-inner">
<span class="secondary__child-link-label">Maecenas Nec Odio et Ante Tincidunt Tempus</span>
</div>
</a>
</li>
<li class="
secondary__child-item
">
<a class="
secondary__child-link
" href="#">
<div class="secondary__child-link-inner">
<span class="secondary__child-link-label">Sed Consequat</span>
</div>
</a>
</li>
<li class="
secondary__child-item
">
<a class="
secondary__child-link
" href="#">
<div class="secondary__child-link-inner">
<span class="secondary__child-link-label">Curabitur Ullamcorper Ultricies Nisi</span>
</div>
</a>
</li>
<li class="
secondary__child-item
">
<a class="
secondary__child-link
" href="#">
<div class="secondary__child-link-inner">
<span class="secondary__child-link-label">Aliquam Lorem Ante</span>
</div>
</a>
</li>
</ul>
</li>
<li class="
secondary__item
">
<a class="
secondary__item-link
" id="secondary-1__link-3item-link" href="#">
<div class="secondary__item-link-inner">
<span class="secondary__item-link-label">Maecenas Tempus Tellus Eget Condimentum Rhoncus Sem Quam Semper Libero,</span>
</div>
</a>
</li>
<li class="
secondary__item
">
<a class="
secondary__item-link
" id="secondary-1__link-4item-link" href="#">
<div class="secondary__item-link-inner">
<span class="secondary__item-link-label">Cras id Dui Aenean Leo</span>
</div>
</a>
</li>
<li class="
secondary__item
">
<a class="
secondary__item-link
" id="secondary-1__link-5item-link" href="#">
<div class="secondary__item-link-inner">
<span class="secondary__item-link-label">Quis Gravida Magna mi a Libero Vestibulum Purus</span>
</div>
</a>
</li>
<li class="
secondary__item
">
<a class="
secondary__item-link
" id="secondary-1__link-6item-link" href="#">
<div class="secondary__item-link-inner">
<span class="secondary__item-link-label">Quisque & Rutrum</span>
</div>
</a>
</li>
</ul>
</nav>
{#
{% include '@navigation-basic' with {
classes: {
base: 'classes',
modifiers: [],
utility: ''
},
title: 'Title',
links: [{ 'title': 'Page Title', 'url': '#', 'children': [] }],
icon: 'icon_item',
child_icon: 'icon_child'
} %}
#}
{% set id = uniqid(classes.base) %}
<nav
class="
{{- classes.base }}
{% for modifier in classes.modifiers %}
{{ classes.base ~ '--' ~ modifier }}
{% endfor %}
{{ classes.utility -}}
"
id="{{ id }}"
{% for attribute, value in attributes %}
{{ attribute }}="{{ value }}"
{% endfor %}
aria-labelledby="{{ id ~ '__title' }}"
>
<div class="{{ classes.base ~ '__header' }}">
<h2
class="{{ classes.base ~ '__title' }}"
id="{{ id ~ '__title' }}"
>
{{- title -}}
</h2>
</div>
<ul
class="{{ classes.base ~ '__list' }}"
aria-labelledby="{{ id ~ '__title' }}"
>
{% for link in links %}
{% set item_id = id ~ '__link-' ~ loop.index %}
{% set has_active_children = false %}
{% for child in link.children %}
{% if child.active %}
{% set has_active_children = true %}
{% endif %}
{% endfor %}
<li
class="
{{ classes.base ~ '__item' }}
{% if link.active %}
{{ classes.base ~ '__item--is-open' }}
{% endif %}
{% if link.children %}
{{ classes.base ~ '__item--has-children' }}
{% if has_active_children %}
{{ classes.base ~ '__item--is-open' }}
{% endif %}
{% endif %}
"
>
<a
class="
{{ classes.base ~ '__item-link' }}
{% if link.active %}
{{ classes.base ~ '__item-link--is-active' }}
{% endif %}
"
id="{{ item_id ~ 'item-link' }}"
href="{{ link.url ?: '#' }}"
{% if link.active %}
aria-current="page"
{% endif %}
>
<div class="{{ classes.base ~ '__item-link-inner' }}">
<span class="{{ classes.base ~ '__item-link-label' }}">
{{- link.title ?: link -}}
</span>
{% if icon or link.icon %}
<span class="{{ classes.base ~ '__item-link-icon' }}" aria-hidden="true">
{{ icon(link.icon ?: icon) }}
</span>
{% endif %}
</div>
</a>
{% if link.children %}
<ul
class="{{ classes.base ~ '__children' }}"
aria-labelledby="{{ item_id ~ 'item-link' }}"
>
{% for child in link.children %}
<li
class="
{{ classes.base ~ '__child-item' }}
{% if child.active %}
{{ classes.base ~ '__child-item--is-open' }}
{% endif %}
"
>
<a
class="
{{ classes.base ~ '__child-link' }}
{% if child.active %}
{{ classes.base ~ '__child-link--is-active' }}
{% endif %}
"
href="{{ child.url ?: '#' }}"
{% if child.active %}
aria-current="page"
{% endif %}
>
<div class="{{ classes.base ~ '__child-link-inner' }}">
<span class="{{ classes.base ~ '__child-link-label' }}">
{{- child.title ?: child -}}
</span>
{% if child_icon or child.icon %}
<span
class="{{ classes.base ~ '__child-link-icon' }}"
aria-hidden="true"
>
{{ icon(child.icon ?: child_icon) }}
</span>
{% endif %}
</div>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
No notes defined.