<nav class="
dropdown_nav
main_dropdown
main_dropdown_demo
" id="dropdown_nav_1" aria-labelledby="dropdown_nav_1_title">
<div class="dropdown_nav_header main_dropdown_header">
<h2 class="dropdown_nav_title main_dropdown_title" id="dropdown_nav_1_title">
dropdown
</h2>
</div>
<ul class="dropdown_nav_list main_dropdown_list" id="dropdown_nav_1_list" aria-labelledby="dropdown_nav_1_title">
<li class="
dropdown_nav_item
main_dropdown_item
has_children " id="dropdown_nav_1_item_1" data-js-nav-collapse-item>
<div class="dropdown_nav_item_inner main_dropdown_item_inner">
<a class="dropdown_nav_link main_dropdown_link" id="dropdown_nav_1_item_1_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_link_inner">
<span class="dropdown_nav_label main_dropdown_link_label">
About
</span>
</div>
</a>
<button class="
main_dropdown_toggle
dropdown_nav_toggle
" data-js-swap="" data-js-nav-collapse-toggle="" data-swap-target="#dropdown_nav_1_item_1" data-swap-group="dropdown_nav_1" aria-labelledby="dropdown_nav_1_item_1_link">
<span class="main_dropdown_toggle_inner">
</span>
</button>
</div>
<ul class="dropdown_nav_children main_dropdown_children" data-js-nav-collapse-children aria-labelledby="dropdown_nav_1_item_1_link">
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
About
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Lorem ipsum
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Consectetuer Adipiscing Elit
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Aenean Commodo
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Penatibus et Magnis dis Parturient Montes Sapien ut Liber
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Aenean Massa
</span>
</div>
</a>
</li>
</ul>
</li>
<li class="
dropdown_nav_item
main_dropdown_item
has_children active " id="dropdown_nav_1_item_2" data-js-nav-collapse-item>
<div class="dropdown_nav_item_inner main_dropdown_item_inner">
<a class="dropdown_nav_link main_dropdown_link active" id="dropdown_nav_1_item_2_link" href="#" aria-current="page">
<div class="dropdown_nav_link_inner main_dropdown_link_inner">
<span class="dropdown_nav_label main_dropdown_link_label">
Academics
</span>
</div>
</a>
<button class="
main_dropdown_toggle
dropdown_nav_toggle
" data-js-swap="" data-js-nav-collapse-toggle="" data-swap-target="#dropdown_nav_1_item_2" data-swap-group="dropdown_nav_1" aria-labelledby="dropdown_nav_1_item_2_link">
<span class="main_dropdown_toggle_inner">
</span>
</button>
</div>
<ul class="dropdown_nav_children main_dropdown_children" data-js-nav-collapse-children aria-labelledby="dropdown_nav_1_item_2_link">
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Nam Quam Nunc
</span>
</div>
</a>
</li>
</ul>
</li>
<li class="
dropdown_nav_item
main_dropdown_item
has_children " id="dropdown_nav_1_item_3" data-js-nav-collapse-item>
<div class="dropdown_nav_item_inner main_dropdown_item_inner">
<a class="dropdown_nav_link main_dropdown_link" id="dropdown_nav_1_item_3_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_link_inner">
<span class="dropdown_nav_label main_dropdown_link_label">
Admissions
</span>
</div>
</a>
<button class="
main_dropdown_toggle
dropdown_nav_toggle
" data-js-swap="" data-js-nav-collapse-toggle="" data-swap-target="#dropdown_nav_1_item_3" data-swap-group="dropdown_nav_1" aria-labelledby="dropdown_nav_1_item_3_link">
<span class="main_dropdown_toggle_inner">
</span>
</button>
</div>
<ul class="dropdown_nav_children main_dropdown_children" data-js-nav-collapse-children aria-labelledby="dropdown_nav_1_item_3_link">
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Nam quam nunc
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Blandit Vel
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Donec Vitae Sapien
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Ut Libero
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Venenatis Faucibus
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Nullam Quis Ante
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Orci Eget Eros Faucibus Tincidunt Maecenas Tempus Tellus Eget Condimentum
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Sed Fringilla Mauris Sit
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Amet Nibh
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Donec Sodales Sagittis
</span>
</div>
</a>
</li>
</ul>
</li>
<li class="
dropdown_nav_item
main_dropdown_item
has_children " id="dropdown_nav_1_item_4" data-js-nav-collapse-item>
<div class="dropdown_nav_item_inner main_dropdown_item_inner">
<a class="dropdown_nav_link main_dropdown_link" id="dropdown_nav_1_item_4_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_link_inner">
<span class="dropdown_nav_label main_dropdown_link_label">
Financial Aid
</span>
</div>
</a>
<button class="
main_dropdown_toggle
dropdown_nav_toggle
" data-js-swap="" data-js-nav-collapse-toggle="" data-swap-target="#dropdown_nav_1_item_4" data-swap-group="dropdown_nav_1" aria-labelledby="dropdown_nav_1_item_4_link">
<span class="main_dropdown_toggle_inner">
</span>
</button>
</div>
<ul class="dropdown_nav_children main_dropdown_children" data-js-nav-collapse-children aria-labelledby="dropdown_nav_1_item_4_link">
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Aliquam Lorem Ante
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Quisque Rutrum
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Aeneanimperdiet
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Tellus Eget Condimentum
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Duis Leo
</span>
</div>
</a>
</li>
</ul>
</li>
<li class="
dropdown_nav_item
main_dropdown_item
has_children " id="dropdown_nav_1_item_5" data-js-nav-collapse-item>
<div class="dropdown_nav_item_inner main_dropdown_item_inner">
<a class="dropdown_nav_link main_dropdown_link" id="dropdown_nav_1_item_5_link" href="#">
<div class="dropdown_nav_link_inner main_dropdown_link_inner">
<span class="dropdown_nav_label main_dropdown_link_label">
Student Life
</span>
</div>
</a>
<button class="
main_dropdown_toggle
dropdown_nav_toggle
" data-js-swap="" data-js-nav-collapse-toggle="" data-swap-target="#dropdown_nav_1_item_5" data-swap-group="dropdown_nav_1" aria-labelledby="dropdown_nav_1_item_5_link">
<span class="main_dropdown_toggle_inner">
</span>
</button>
</div>
<ul class="dropdown_nav_children main_dropdown_children" data-js-nav-collapse-children aria-labelledby="dropdown_nav_1_item_5_link">
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Aenean Vulputate Eleifend Tellus
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Nascetur
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Ridiculus Mus
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Pellentesque Eu
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Vivamus Elementum Semper
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Aenean Vulputate
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Aenean Leo Ligula
</span>
</div>
</a>
</li>
<li class="dropdown_nav_child_item main_dropdown_child_item" data-js-nav-collapse-child-item>
<a class="dropdown_nav_child_link main_dropdown_child_link" data-js-nav-collapse-child-link href="#">
<div class="dropdown_nav_link_inner main_dropdown_child_link_inner">
<span class="dropdown_nav_child_link_label main_dropdown_child_link_label">
Semper Libero
</span>
</div>
</a>
</li>
</ul>
</li>
</ul>
</nav>
{#
{% include '@navigation-dropdown' with {
classes: {
base: 'class',
modifiers: ['modifier'],
utility: ''
},
data: 'data-attribute',
title: 'Title',
toggle_icon: 'icon_toggle',
active_index: '1',
links: [{ 'title': 'Page Title', 'url': '#', 'children': [] }],
icon: 'icon_item',
child_icon: 'icon_child'
} %}
#}
{% set id = uniqid('dropdown_nav') %}
<nav
class="
dropdown_nav
{{ classes.base }}
{% for modifier in classes.modifiers %}
{{ classes.base ~ '_' ~ modifier }}
{% endfor %}
{{ classes.utility }}
"
id="{{ id }}"
{% if data %}{{ data }}{% endif %}
aria-labelledby="{{ id }}_title"
>
<div class="dropdown_nav_header {{ classes.base }}_header">
<h2 class="dropdown_nav_title {{ classes.base }}_title" id="{{ id }}_title">
{{ title }}
</h2>
</div>
<ul
class="dropdown_nav_list {{ classes.base }}_list"
id="{{ id }}_list"
aria-labelledby="{{ id }}_title"
>
{% for link in links %}
{% set item_id = id ~ '_item_' ~ loop.index %}
{% set is_active = loop.index == active_index %}
<li
class="
dropdown_nav_item
{{ classes.base }}_item
{% if link.children %}has_children{% endif %}
{% if is_active %}active{% endif %}
"
id="{{ item_id }}"
data-js-nav-collapse-item
>
<div class="dropdown_nav_item_inner {{ classes.base }}_item_inner">
<a
class="dropdown_nav_link {{ classes.base }}_link{% if is_active %} active{% endif %}"
id="{{ item_id }}_link"
href="{{ link.url ?: '#' }}"
{% if is_active %}aria-current="page"{% endif %}
>
<div class="dropdown_nav_link_inner {{ classes.base }}_link_inner">
<span class="dropdown_nav_label {{ classes.base }}_link_label">
{{ link.title ?: link }}
</span>
{% if icon or link.icon %}
<span class="dropdown_nav_icon {{ classes.base }}_link_icon" aria-hidden="true">
{{ icon(link.icon ?: icon) }}
</span>
{% endif %}
</div>
</a>
{% if link.children %}
{% include '@partial-button' with {
classes: {
base: classes.base ~ '_toggle',
utility: 'dropdown_nav_toggle ' ~ toggle.classes.base ~ ' ' ~ toggle.classes.utility
},
id: null,
attributes: {
'data-js-swap': '',
'data-js-nav-collapse-toggle': '',
'data-swap-target': '#' ~ item_id,
'data-swap-group': id,
'aria-labelledby': item_id ~ '_link'
},
title: null,
icon: toggle.icon
} %}
{% endif %}
</div>
{% if link.children %}
<ul
class="dropdown_nav_children {{ classes.base }}_children"
data-js-nav-collapse-children
aria-labelledby="{{ item_id }}_link"
>
{% for child in link.children %}
<li
class="dropdown_nav_child_item {{ classes.base }}_child_item"
data-js-nav-collapse-child-item
>
<a
class="dropdown_nav_child_link {{ classes.base }}_child_link"
data-js-nav-collapse-child-link
href="{{ child.url ?: '#' }}"
>
<div class="dropdown_nav_link_inner {{ classes.base }}_child_link_inner">
<span class="dropdown_nav_child_link_label {{ classes.base }}_child_link_label">
{{ child.title ?: child }}
</span>
{% if child_icon or child.icon %}
<span class="dropdown_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.