<div class="
toggle_nav_group
audience_group
audience_demo
" id="toggle_nav_9_group" data-js-nav-toggle-group>
<div class="toggle_nav_button audience_button">
<button class="
button_toggle
" id="toggle_nav_9_toggle" data-js-nav-toggle-button="" data-js-swap="" data-swap-target="#toggle_nav_9_group">
<span class="_inner button_toggle_inner button_toggle_inner_default">
</span>
</button>
</div>
<div class="
toggle_nav_panel
audience_panel
" data-js-nav-toggle-panel>
<nav class="
toggle_nav
audience
" id="toggle_nav_9" aria-labelledby="toggle_nav_9_title">
<div class="toggle_nav_header audience_header">
<h2 class="toggle_nav_title audience_title" id="toggle_nav_9_title">
Audience
</h2>
</div>
<ul class="toggle_nav_list audience_list" id="toggle_nav_9_list" aria-labelledby="toggle_nav_9_title">
<li class="toggle_nav_item audience_item" id="toggle_nav_9_item_1" data-js-nav-toggle-item>
<a class="toggle_nav_link audience_link" id="toggle_nav_9_item_1_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner audience_link_inner">
<span class="toggle_nav_link_label audience_link_label">
Faculty
</span>
</div>
</a>
</li>
<li class="toggle_nav_item audience_item" id="toggle_nav_9_item_2" data-js-nav-toggle-item>
<a class="toggle_nav_link audience_link" id="toggle_nav_9_item_2_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner audience_link_inner">
<span class="toggle_nav_link_label audience_link_label">
Staff
</span>
</div>
</a>
</li>
<li class="toggle_nav_item audience_item" id="toggle_nav_9_item_3" data-js-nav-toggle-item>
<a class="toggle_nav_link audience_link" id="toggle_nav_9_item_3_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner audience_link_inner">
<span class="toggle_nav_link_label audience_link_label">
Current Students
</span>
</div>
</a>
</li>
<li class="toggle_nav_item audience_item" id="toggle_nav_9_item_4" data-js-nav-toggle-item>
<a class="toggle_nav_link audience_link" id="toggle_nav_9_item_4_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner audience_link_inner">
<span class="toggle_nav_link_label audience_link_label">
Prospective Student
</span>
</div>
</a>
</li>
<li class="toggle_nav_item audience_item" id="toggle_nav_9_item_5" data-js-nav-toggle-item>
<a class="toggle_nav_link audience_link" id="toggle_nav_9_item_5_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner audience_link_inner">
<span class="toggle_nav_link_label audience_link_label">
Alumni
</span>
</div>
</a>
</li>
<li class="toggle_nav_item audience_item" id="toggle_nav_9_item_6" data-js-nav-toggle-item>
<a class="toggle_nav_link audience_link" id="toggle_nav_9_item_6_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner audience_link_inner">
<span class="toggle_nav_link_label audience_link_label">
Parents & Families
</span>
</div>
</a>
</li>
<li class="toggle_nav_item audience_item" id="toggle_nav_9_item_7" data-js-nav-toggle-item>
<a class="toggle_nav_link audience_link" id="toggle_nav_9_item_7_link" href="#" data-js-nav-toggle-link>
<div class="toggle_nav_link_inner audience_link_inner">
<span class="toggle_nav_link_label audience_link_label">
Visitors
</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
</div>
{#
{% include '@navigation-toggle' with {
classes: {
base: 'class',
modifiers: ['modifier'],
utility: ''
},
data: 'data-attribute',
title: 'Title',
links: [{ 'title': 'Page Title', 'url': '#', 'children': [] }],
icon: 'icon_item',
child_icon: 'icon_child',
toggle: {
classes: {
base: 'base',
modifiers: [
'modifier'
]
},
attributes: {
'attribute': 'value'
},
default: {
title: 'Audience',
icon: 'plus'
},
active: {
title: 'Close',
icon: 'minus'
}
}
} %}
#}
{% set id = uniqid('toggle_nav') %}
<div
class="
toggle_nav_group
{{ classes.base }}_group
{% for modifier in classes.modifiers %}
{{ classes.base ~ '_' ~ modifier }}
{% endfor %}
{{ classes.utility }}
"
id="{{ id }}_group"
data-js-nav-toggle-group
{% if data %}{{ data }}{% endif %}
>
<div class="toggle_nav_button {{ classes.base }}_button">
{% include '@partial-button-toggle' with {
classes: {
base: toggle.classes.base,
modifiers: toggle.classes.modifiers
},
id: id ~ '_toggle',
attributes: {
'data-js-nav-toggle-button': '',
'data-js-swap': '',
'data-swap-target': '#' ~ id ~ '_group',
toggle.attributes
},
default: {
title: toggle.default.title,
icon: toggle.default.icon
},
active: {
title: toggle.active.title,
icon: toggle.active.icon
}
} %}
</div>
<div
class="
toggle_nav_panel
{{ classes.base }}_panel
{% if modifier %}{{ classes.base }}_panel_{{ modifier }}{% endif %}
"
data-js-nav-toggle-panel
>
<nav
class="
toggle_nav
{{ classes.base }}
{% if modifier %}{{ classes.base }}_{{ modifier }}{% endif %}
"
id="{{ id }}"
aria-labelledby="{{ id }}_title"
>
<div class="toggle_nav_header {{ classes.base }}_header">
<h2 class="toggle_nav_title {{ classes.base }}_title" id="{{ id }}_title">
{{ title }}
</h2>
</div>
<ul
class="toggle_nav_list {{ classes.base }}_list"
id="{{ id }}_list"
aria-labelledby="{{ id }}_title"
>
{% for link in links %}
{% set item_id = id ~ '_item_' ~ loop.index %}
<li
class="toggle_nav_item {{ classes.base }}_item"
id="{{ item_id }}"
data-js-nav-toggle-item
>
<a
class="toggle_nav_link {{ classes.base }}_link"
id="{{ item_id }}_link"
href="{{ link.url ?: '#' }}"
data-js-nav-toggle-link
>
<div class="toggle_nav_link_inner {{ classes.base }}_link_inner">
<span class="toggle_nav_link_label {{ classes.base }}_link_label">
{{ link.title ?: link }}
</span>
{% if icon or link.icon %}
<span class="toggle_nav_link_icon {{ classes.base }}_link_icon" aria-hidden="true">
{{ icon(link.icon ?: icon) }}
</span>
{% endif %}
</div>
</a>
{% if link.children %}
<ul
class="toggle_nav_children {{ classes.base }}_children"
aria-labelledby="{{ item_id }}"
>
{% for child in link.children %}
<li class="toggle_nav_child_item {{ classes.base }}_child_item">
<a
class="toggle_nav_child_link {{ classes.base }}_child_link"
href="{{ child.url ?: '#' }}"
>
<div class="toggle_nav_child_link_inner {{ classes.base }}_child_link_inner">
<span class="toggle_nav_child_link_label {{ classes.base }}_child_link_label">
{{ child.title ?: child }}
</span>
{% if child_icon or child.icon %}
<span class="toggle_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>
</div>
</div>
No notes defined.