Sub

<div class="js-sub-nav-group sub_nav_group">

    <button class="js-sub-nav-toggle js-swap sub_nav_toggle " data-swap-target=".js-sub-nav-group">
        <span class="sub_nav_toggle_inner_default sub_nav_toggle_inner">
            <span class="sub_nav_toggle_label_default sub_nav_toggle_label">Explore This Section</span>
            <span class="sub_nav_toggle_icon_default sub_nav_toggle_icon" aria-hidden="true">
                <span class="sub_nav_toggle_icon_inner_default sub_nav_toggle_icon_inner">
                    <span class="sub_nav_toggle_icon_space">&#xfeff;</span>

                    <svg class="icon icon_plus">
                        <use href="/images/icons.svg#plus" />
                    </svg>

                </span>
            </span>
        </span>
        <span class="sub_nav_toggle_inner_active sub_nav_toggle_inner">
            <span class="sub_nav_toggle_label_active sub_nav_toggle_label">Close</span>
            <span class="sub_nav_toggle_icon_active sub_nav_toggle_icon" aria-hidden="true">
                <span class="sub_nav_toggle_icon_inner_active sub_nav_toggle_icon_inner">
                    <span class="sub_nav_toggle_icon_space">&#xfeff;</span>

                    <svg class="icon icon_minus">
                        <use href="/images/icons.svg#minus" />
                    </svg>

                </span>
            </span>
        </span>
    </button>
    <nav class="js-sub-nav sub_nav" aria-labelledby="sub_nav_title">
        <div class="sub_nav_header">
            <h2 class="sub_nav_title" id="sub_nav_title">Sub Nav Title</h2>
        </div>
        <div class="js-sub-nav-body sub_nav_body">
            <div class="js-sub-nav-body-inner sub_nav_body_inner">
                <ul class="js-sub-nav-list sub_nav_list" aria-labelledby="sub_nav_title">
                    <li class="sub_nav_item">
                        <a class="sub_nav_link" href="#">
                            <span class="sub_nav_link_label">Know Thyself</span>
                        </a>
                    </li>
                    <li class="sub_nav_item">
                        <a class="sub_nav_link" href="#">
                            <span class="sub_nav_link_label">Just the Facts</span>
                        </a>
                    </li>
                    <li class="sub_nav_item">
                        <a class="sub_nav_link" href="#">
                            <span class="sub_nav_link_label">History &amp; Traditions</span>
                        </a>
                    </li>
                    <li class="sub_nav_item">
                        <a class="sub_nav_link" href="#">
                            <span class="sub_nav_link_label">Our Region</span>
                        </a>
                    </li>
                    <li class="sub_nav_item">
                        <a class="sub_nav_link" href="#">
                            <span class="sub_nav_link_label">Diversity, Equity &amp; Inclusion</span>
                        </a>
                        <ul class="sub_nav_children">
                            <li class="sub_nav_child_item">
                                <a class="sub_nav_child_link" href="#">
                                    <span class="sub_nav_child_link_label">Advisory Council</span>
                                </a>
                            </li>
                            <li class="sub_nav_child_item">
                                <a class="sub_nav_child_link" href="#">
                                    <span class="sub_nav_child_link_label">Programs &amp; Services</span>
                                </a>
                            </li>
                            <li class="sub_nav_child_item">
                                <a class="sub_nav_child_link" href="#">
                                    <span class="sub_nav_child_link_label">Student Cultural Orgs</span>
                                </a>
                            </li>
                            <li class="sub_nav_child_item">
                                <a class="sub_nav_child_link" href="#">
                                    <span class="sub_nav_child_link_label">Tracking Progress</span>
                                </a>
                            </li>
                            <li class="sub_nav_child_item">
                                <a class="sub_nav_child_link" href="#">
                                    <span class="sub_nav_child_link_label">Updates &amp; Messages</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="sub_nav_item">
                        <a class="sub_nav_link" href="#">
                            <span class="sub_nav_link_label">Contact Us</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>
{#
	{% include navigation('sub') with {
		modifier: 'lg',
		title: ''
	} %}
#}

<div class="js-sub-nav-group sub_nav_group">
	{% render '@partial-button-toggle' with {
		class: 'sub_nav',
		title: 'Explore This Section',
		icon: 'plus',
		active_title: 'Close',
		active_icon: 'minus',
		swap_target: '.js-sub-nav-group'
	} %}

	<nav class="js-sub-nav sub_nav{% if modifier %} sub_nav_{{ modifier }}{% endif %}" aria-labelledby="sub_nav_title{% if modifier %}_{{ modifier }}{% endif %}">
		<div class="sub_nav_header">
			<h2 class="sub_nav_title" id="sub_nav_title{% if modifier %}_{{ modifier }}{% endif %}">{{ title }}</h2>
		</div>
		<div class="js-sub-nav-body sub_nav_body">
			<div class="js-sub-nav-body-inner sub_nav_body_inner">
				<ul class="js-sub-nav-list sub_nav_list" aria-labelledby="sub_nav_title{% if modifier %}_{{ modifier }}{% endif %}">
					{% for link in page.subNav %}
						<li class="sub_nav_item">
							<a class="sub_nav_link" href="{{ link.url ?: '#' }}">
								{% if link.icon %}
									<span class="sub_nav_link_icon">{{ icon(link.icon) }}</span>
								{% endif %}
								<span class="sub_nav_link_label">{{ link.title ?: link }}</span>
							</a>
							{% if link.children %}
								<ul class="sub_nav_children">
									{% for child in link.children %}
										<li class="sub_nav_child_item">
											<a class="sub_nav_child_link" href="{{ child.url ?: '#' }}">
												<span class="sub_nav_child_link_label">{{ child.title ?: child }}</span>
											</a>
											{% if child.children %}
												<ul class="sub_nav_grandchildren">
													{% for child in child.children %}
														<li class="sub_nav_grandchild_item">
															<a class="sub_nav_grandchild_link" href="{{ child.url ?: '#' }}">
																<span class="sub_nav_grandchild_link_label">{{ child.title ?: child }}</span>
															</a>
														</li>
													{% endfor %}
												</ul>
											{% endif %}
										</li>
									{% endfor %}
								</ul>
							{% endif %}
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</nav>
</div>

No notes defined.