JHU India Component Library

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">Leadership & Team</span>
                        </a>
                    </li>
                    <li class="sub_nav_item">
                        <a class="sub_nav_link" href="#">
                            <span class="sub_nav_link_label">Faculty & Staff</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.