MSMU 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">

                <svg class="icon icon_angle_down">
                    <use href="/images/icons.svg#angle_down" />
                </svg>

            </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">

                <svg class="icon icon_angle_down">
                    <use href="/images/icons.svg#angle_down" />
                </svg>

            </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 href="#">
                            <span>Undergraduate Admissions</span>
                        </a>
                    </li>
                    <li class="sub_nav_item">
                        <a href="#">
                            <span>Graduate Admissions</span>
                        </a>
                    </li>
                    <li class="sub_nav_item">
                        <a href="#">
                            <span>Nursing Admission</span>
                        </a>
                    </li>
                    <li class="sub_nav_item">
                        <a href="#">
                            <span>International Admission</span>
                        </a>
                    </li>
                    <li class="sub_nav_item">
                        <a href="#">
                            <span>Apply Now</span>
                        </a>
                    </li>
                    <li class="sub_nav_item">
                        <a href="#">
                            <span>Financial Aid</span>
                        </a>
                    </li>
                    <li class="sub_nav_item">
                        <a href="#">
                            <span>Visit the Mount</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: 'angle_down',
		active_title: 'Close',
		active_icon: 'angle_down',
		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{% if page.subNavActive == link %} active{% endif %}">
							<a href="{{ link.url ?: '#' }}">
								<span>{{ 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.