Washington National Cathedral Component Library

Sub 

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

    <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_more">
                    <use href="/images/icons.svg#more" />
                </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_close">
                    <use href="/images/icons.svg#close" />
                </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 class="sub_nav_link" href="#">
                            <span class="sub_nav_link_label">Special & Seasonal Programs</span>
                        </a>
                    </li>
                    <li class="sub_nav_item">
                        <a class="sub_nav_link" href="#">
                            <span class="sub_nav_link_label">Racial & Social Justice</span>
                        </a>
                    </li>
                    <li class="sub_nav_item">
                        <a class="sub_nav_link" href="#">
                            <span class="sub_nav_link_label">Veterans & Military Families</span>
                        </a>
                    </li>
                    <li class="sub_nav_item active">
                        <a class="sub_nav_link" href="#">
                            <span class="sub_nav_link_label">Center for Prayer & Pilgrimage</span>
                        </a>
                    </li>
                    <li class="sub_nav_item">
                        <a class="sub_nav_link" href="#">
                            <span class="sub_nav_link_label">Cathedral Scholars Program</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>
 
{#
	{% include navigation('sub') with {
		modifier: 'lg',
		title: ''
	} %}
#}

<div class="js-sub-nav-group sub_nav_group{% if page.subNav|length <= 5 %} sub_nav_group_small{% endif %}">
	{% render '@partial-button-toggle' with {
		class: 'sub_nav',
		title: 'Explore This Section',
		icon: 'more',
		active_title: 'Close',
		active_icon: 'close',
		swap_target: '.js-sub-nav-group',
		js: true
	} %}

	<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>
			{% if parent %}
			<h3 class="sub_nav_parent">{{ parent }}</h3>
			{% endif %}
		</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 link.active %} active{% endif %}">
							<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.