<nav class="
disclosure-nav
main-disclosure-collapse
disclosure-collapse-nav" id="disclosure-nav-4" data-js-nav-disclosure aria-labelledby="disclosure-nav-4__title">
<div class="
disclosure-nav__header
main-disclosure-collapse__header
">
<h2 class="disclosure-nav__title main-disclosure-collapse__title" id="disclosure-nav-4__title">Site</h2>
</div>
<ul class="
disclosure-nav__list
main-disclosure-collapse__list
" id="disclosure-nav-4_list" aria-labelledby="disclosure-nav-4__title">
<li class="
disclosure-nav__item
main-disclosure-collapse__item
main-disclosure-collapse__item--has-children
" id="disclosure-nav-4__item-1" data-js-nav-disclosure-item>
<div class="
disclosure-nav__item-inner
main-disclosure-collapse__item-inner
">
<a class="
disclosure-nav__item-link
main-disclosure-collapse__item-link
" id="disclosure-nav-4__item-1-link" href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__item-link-label
main-disclosure-collapse__item-link-label
">About</span>
</div>
</a>
<button class="main-disclosure-collapse__item-toggle
disclosure-nav__item-toggle button-bordered" data-js-nav-disclosure-button="" aria-labelledby="disclosure-nav-4__item-1-link" aria-controls="disclosure-nav-4__children-1">
<span class="main-disclosure-collapse__item-toggle-inner"> <span class="main-disclosure-collapse__item-toggle-icon" aria-hidden="true"><svg class="icon icon--caret-down">
<use href="/images/icons.svg?1.0.0#caret-down" />
</svg></span>
</span>
</button>
</div>
<ul class="
disclosure-nav__children
main-disclosure-collapse__children
" id="disclosure-nav-4__children-1" data-js-nav-disclosure-panel aria-labelledby="disclosure-nav-4__item-1-link" hidden>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Lorem ipsum</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Consectetuer Adipiscing Elit</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Aenean Commodo</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Penatibus et Magnis dis Parturient Montes Sapien ut Liber</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Aenean Massa</span>
</div>
</a>
</li>
</ul>
</li>
<li class="
disclosure-nav__item
main-disclosure-collapse__item
main-disclosure-collapse__item--has-children
" id="disclosure-nav-4__item-2" data-js-nav-disclosure-item>
<div class="
disclosure-nav__item-inner
main-disclosure-collapse__item-inner
">
<a class="
disclosure-nav__item-link
main-disclosure-collapse__item-link
" id="disclosure-nav-4__item-2-link" href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__item-link-label
main-disclosure-collapse__item-link-label
">Academics</span>
</div>
</a>
<button class="main-disclosure-collapse__item-toggle
disclosure-nav__item-toggle button-bordered" data-js-nav-disclosure-button="" aria-labelledby="disclosure-nav-4__item-2-link" aria-controls="disclosure-nav-4__children-2">
<span class="main-disclosure-collapse__item-toggle-inner"> <span class="main-disclosure-collapse__item-toggle-icon" aria-hidden="true"><svg class="icon icon--caret-down">
<use href="/images/icons.svg?1.0.0#caret-down" />
</svg></span>
</span>
</button>
</div>
<ul class="
disclosure-nav__children
main-disclosure-collapse__children
" id="disclosure-nav-4__children-2" data-js-nav-disclosure-panel aria-labelledby="disclosure-nav-4__item-2-link" hidden>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Nam Quam Nunc</span>
</div>
</a>
</li>
</ul>
</li>
<li class="
disclosure-nav__item
main-disclosure-collapse__item
main-disclosure-collapse__item--is-open
main-disclosure-collapse__item--has-children
" id="disclosure-nav-4__item-3" data-js-nav-disclosure-item>
<div class="
disclosure-nav__item-inner
main-disclosure-collapse__item-inner
">
<a class="
disclosure-nav__item-link
main-disclosure-collapse__item-link
main-disclosure-collapse__item-link--is-active
" id="disclosure-nav-4__item-3-link" href="#" aria-current="page">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__item-link-label
main-disclosure-collapse__item-link-label
">Admissions</span>
</div>
</a>
<button class="main-disclosure-collapse__item-toggle
disclosure-nav__item-toggle button-bordered" data-js-nav-disclosure-button="" aria-labelledby="disclosure-nav-4__item-3-link" aria-controls="disclosure-nav-4__children-3">
<span class="main-disclosure-collapse__item-toggle-inner"> <span class="main-disclosure-collapse__item-toggle-icon" aria-hidden="true"><svg class="icon icon--caret-down">
<use href="/images/icons.svg?1.0.0#caret-down" />
</svg></span>
</span>
</button>
</div>
<ul class="
disclosure-nav__children
main-disclosure-collapse__children
" id="disclosure-nav-4__children-3" data-js-nav-disclosure-panel aria-labelledby="disclosure-nav-4__item-3-link" hidden>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Nam quam nunc</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Blandit Vel</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Donec Vitae Sapien</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Ut Libero</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Venenatis Faucibus</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Nullam Quis Ante</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Orci Eget Eros Faucibus Tincidunt Maecenas Tempus Tellus Eget Condimentum</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Sed Fringilla Mauris Sit</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Amet Nibh</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Donec Sodales Sagittis</span>
</div>
</a>
</li>
</ul>
</li>
<li class="
disclosure-nav__item
main-disclosure-collapse__item
main-disclosure-collapse__item--has-children
" id="disclosure-nav-4__item-4" data-js-nav-disclosure-item>
<div class="
disclosure-nav__item-inner
main-disclosure-collapse__item-inner
">
<a class="
disclosure-nav__item-link
main-disclosure-collapse__item-link
" id="disclosure-nav-4__item-4-link" href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__item-link-label
main-disclosure-collapse__item-link-label
">Financial Aid</span>
</div>
</a>
<button class="main-disclosure-collapse__item-toggle
disclosure-nav__item-toggle button-bordered" data-js-nav-disclosure-button="" aria-labelledby="disclosure-nav-4__item-4-link" aria-controls="disclosure-nav-4__children-4">
<span class="main-disclosure-collapse__item-toggle-inner"> <span class="main-disclosure-collapse__item-toggle-icon" aria-hidden="true"><svg class="icon icon--caret-down">
<use href="/images/icons.svg?1.0.0#caret-down" />
</svg></span>
</span>
</button>
</div>
<ul class="
disclosure-nav__children
main-disclosure-collapse__children
" id="disclosure-nav-4__children-4" data-js-nav-disclosure-panel aria-labelledby="disclosure-nav-4__item-4-link" hidden>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Aliquam Lorem Ante</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Quisque Rutrum</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Aeneanimperdiet</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Tellus Eget Condimentum</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Duis Leo</span>
</div>
</a>
</li>
</ul>
</li>
<li class="
disclosure-nav__item
main-disclosure-collapse__item
main-disclosure-collapse__item--has-children
" id="disclosure-nav-4__item-5" data-js-nav-disclosure-item>
<div class="
disclosure-nav__item-inner
main-disclosure-collapse__item-inner
">
<a class="
disclosure-nav__item-link
main-disclosure-collapse__item-link
" id="disclosure-nav-4__item-5-link" href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__item-link-label
main-disclosure-collapse__item-link-label
">Student Life</span>
</div>
</a>
<button class="main-disclosure-collapse__item-toggle
disclosure-nav__item-toggle button-bordered" data-js-nav-disclosure-button="" aria-labelledby="disclosure-nav-4__item-5-link" aria-controls="disclosure-nav-4__children-5">
<span class="main-disclosure-collapse__item-toggle-inner"> <span class="main-disclosure-collapse__item-toggle-icon" aria-hidden="true"><svg class="icon icon--caret-down">
<use href="/images/icons.svg?1.0.0#caret-down" />
</svg></span>
</span>
</button>
</div>
<ul class="
disclosure-nav__children
main-disclosure-collapse__children
" id="disclosure-nav-4__children-5" data-js-nav-disclosure-panel aria-labelledby="disclosure-nav-4__item-5-link" hidden>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Aenean Vulputate Eleifend Tellus</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Nascetur</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Ridiculus Mus</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Pellentesque Eu</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Vivamus Elementum Semper</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Aenean Vulputate</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Aenean Leo Ligula</span>
</div>
</a>
</li>
<li class="
disclosure-nav__child-item
main-disclosure-collapse__child-item
" data-js-nav-disclosure-child-item>
<a class="
disclosure-nav__child-link
main-disclosure-collapse__child-link
" data-js-nav-disclosure-child-link href="#">
<div class="
disclosure-nav__item-link-inner
main-disclosure-collapse__item-link-inner
">
<span class="
disclosure-nav__child-link-label
main-disclosure-collapse__child-link-label
">Semper Libero</span>
</div>
</a>
</li>
</ul>
</li>
</ul>
</nav>
{#
{% include '@navigation-disclosure-nav' with {
classes: {
base: 'class',
modifiers: ['modifier'],
utility: ''
},
attributes: {
'attribute': 'value'
},
title: 'Title',
toggle: {
classes: {
utility: ''
},
icon: 'icon_toggle'
},
links: [{ 'title': 'Page Title', 'url': '#', 'children': [] }],
icon: 'icon_item',
child_icon: 'icon_child',
settings: {}
} %}
#}
{% set id = uniqid('disclosure-nav') %}
{% set heading_level = heading_level ?? 2 %}
{% set heading_tag = 'h' ~ (heading_level) %}
<nav
class="
disclosure-nav
{{ classes.base }}
{% for modifier in classes.modifiers %}
{{ classes.base ~ '--' ~ modifier }}
{% endfor %}
{{ classes.utility -}}
"
id="{{ id }}"
{% for attribute, value in attributes %}
{{ attribute }}="{{ value }}"
{% endfor %}
data-js-nav-disclosure{% if settings is not empty %}='{{ settings|json_encode }}'{% endif %}
aria-labelledby="{{ id ~ '__title' }}"
>
<div
class="
disclosure-nav__header
{{ classes.base ~ '__header' }}
"
>
<{{ heading_tag }} class="disclosure-nav__title {{ classes.base ~ '__title' }}" id="{{ id ~ '__title' }}">
{{- title -}}
</{{ heading_tag }}>
</div>
<ul
class="
disclosure-nav__list
{{ classes.base ~ '__list' }}
"
id="{{ id ~ '_list' }}"
aria-labelledby="{{ id ~ '__title' }}"
>
{% for link in links %}
{% set item_id = id ~ '__item-' ~ loop.index %}
{% set children_id = id ~ '__children-' ~ loop.index %}
{% set has_active_children = false %}
{% for child in link.children %}
{% if child.active %}
{% set has_active_children = true %}
{% endif %}
{% endfor %}
<li
class="
disclosure-nav__item
{{ 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 %}
"
id="{{ item_id }}"
{% if link.children %}
data-js-nav-disclosure-item
{% endif %}
>
<div
class="
disclosure-nav__item-inner
{{ classes.base ~ '__item-inner' }}
"
>
<a
class="
disclosure-nav__item-link
{{ classes.base ~ '__item-link' }}
{% if link.active %}
{{ classes.base ~ '__item-link--is-active' }}
{% endif %}
"
id="{{ item_id ~ '-link' }}"
href="{{ link.url ?: '#' }}"
{% if link.active %}
aria-current="page"
{% endif %}
>
<div
class="
disclosure-nav__item-link-inner
{{ classes.base ~ '__item-link-inner' }}
"
>
<span
class="
disclosure-nav__item-link-label
{{ classes.base ~ '__item-link-label' }}
"
>
{{- link.title ?: link -}}
</span>
{% if icon or link.icon %}
<span
class="
disclosure-nav__item-link-icon
{{ classes.base ~ '__item-link-icon' }}
"
aria-hidden="true"
>
{{ icon(link.icon ?: icon) }}
</span>
{% endif %}
</div>
</a>
{% if link.children %}
{% include '@partial-button' with {
classes: {
base: classes.base ~ '__item-toggle',
modifiers: classes.modifiers,
utility: 'disclosure-nav__item-toggle ' ~ toggle.classes.utility
},
attributes: {
'data-js-nav-disclosure-button': '',
'aria-labelledby': item_id ~ '-link',
'aria-controls': children_id
},
title: null,
icon: toggle.icon
} only %}
{% endif %}
</div>
{% if link.children %}
<ul
class="
disclosure-nav__children
{{ classes.base ~ '__children' }}
"
id="{{ children_id }}"
data-js-nav-disclosure-panel
aria-labelledby="{{ item_id ~ '-link' }}"
hidden
>
{% for child in link.children %}
<li
class="
disclosure-nav__child-item
{{ classes.base ~ '__child-item' }}
{% if child.active %}
{{ classes.base ~ '__child-item--is-open' }}
{% endif %}
"
data-js-nav-disclosure-child-item
>
<a
class="
disclosure-nav__child-link
{{ classes.base ~ '__child-link' }}
{% if child.active %}
{{ classes.base ~ '__child-link--is-active' }}
{% endif %}
"
data-js-nav-disclosure-child-link
href="{{ child.url ?: '#' }}"
{% if child.active %}
aria-current="page"
{% endif %}
>
<div
class="
disclosure-nav__item-link-inner
{{ classes.base ~ '__item-link-inner' }}
"
>
<span
class="
disclosure-nav__child-link-label
{{ classes.base ~ '__child-link-label' }}
"
>
{{- child.title ?: child -}}
</span>
{% if child_icon or child.icon %}
<span
class="
disclosure-nav__child-link-icon
{{ 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.