JHU SOE Component Library

Page Subnav Mobile 

<div class="page_sidebar_wrapper small" id="sub_nav_small">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="page_sidebar">
                <div class="sub_nav_wrapper">
                    <div class="sub_nav_group">
                        <h2 class="sub_nav_label">Menu</h2>

                        <nav class="sub_nav" aria-labelledby="basic_nav_title_47">
                            <div class="sub_nav_header">
                                <h2 class="sub_nav_title" id="basic_nav_title_47">
                                    <span class="sub_nav_title_label"></span>
                                </h2>
                            </div>
                            <ul class="sub_nav_list" aria-labelledby="basic_nav_title_47">
                                <li class="sub_nav_item">
                                    <a class="sub_nav_link" href="#">
                                        <div class="sub_nav_link_inner">
                                            <span class="sub_nav_link_label">A Vision Defined by Action</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="sub_nav_item">
                                    <a class="sub_nav_link" href="#">
                                        <div class="sub_nav_link_inner">
                                            <span class="sub_nav_link_label">Our Pillars: Areas of Impact</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="sub_nav_item">
                                    <a class="sub_nav_link" href="#">
                                        <div class="sub_nav_link_inner">
                                            <span class="sub_nav_link_label">Our Common Commitment</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <div class="page_cta">
                        <a class="page_cta_link" href="#">
                            <span class="page_cta_link_label">Emphasized Link</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{#
	{% include '@partial-page-subnav' with {
		page: page
	} %}
#}

{% if page.subNav != false or page.cta or page.related_content %}
	<div class="page_sidebar_wrapper small" id="sub_nav_small">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="page_sidebar">
					{% if page.subNav != false or page.cta %}
						<div class="sub_nav_wrapper">
							{% if page.subNav != false  %}
								<div class="sub_nav_group">
									<h2 class="sub_nav_label">Menu</h2>
									{% if page.subNav != false  %}
										{% include '@navigation-basic' with {
											class: 'sub',
											modifier: '',
											title: page.title_short,
											title_prefix: 'Menu',
											active_index: '',
											links: page.subNav
										} %}
									{% endif %}
								</div>
							{% endif %}
							{% if page.cta %}
								<div class="page_cta">
									<a class="page_cta_link" href="{{ page.cta.url }}">
										<span class="page_cta_link_label">{{ page.cta.label }}</span>
									</a>
								</div>
							{% endif %}
						</div>
					{% endif %}
					{% if page.related_content %}
						<div class="related_content">
							{% for card in page.related_content %}
								<div class="related_content_card">
									{% include '@partial-' ~ card.card_type ~ '-card' with {
										item: card.item
									} %}
								</div>
							{% endfor %}
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
{% endif %}

No notes defined.