JHU SOE Component Library

Basic 

<nav class="secondary_nav secondary_nav_demo" aria-labelledby="basic_nav_title_5">
    <div class="secondary_nav_header">
        <h2 class="secondary_nav_title" id="basic_nav_title_5">
            <span class="secondary_nav_title_label">Basic</span>
        </h2>
    </div>
    <ul class="secondary_nav_list" aria-labelledby="basic_nav_title_5">
        <li class="secondary_nav_item">
            <a class="secondary_nav_link" href="#">
                <div class="secondary_nav_link_inner">
                    <span class="secondary_nav_link_icon" aria-hidden="true">
                        <svg class="icon icon_shield">
                            <use href="/images/icons.svg#shield" />
                        </svg>
                    </span>
                    <span class="secondary_nav_link_label">About</span>
                </div>
            </a>
        </li>
        <li class="secondary_nav_item has_children">
            <a class="secondary_nav_link" href="#">
                <div class="secondary_nav_link_inner">
                    <span class="secondary_nav_link_icon" aria-hidden="true">
                        <svg class="icon icon_people">
                            <use href="/images/icons.svg#people" />
                        </svg>
                    </span>
                    <span class="secondary_nav_link_label">Info For</span>
                </div>
            </a>
            <ul class="secondary_nav_children" aria-label="Info For">
                <li class="secondary_nav_child_item">
                    <a class="secondary_nav_child_link" href="#">
                        <div class="secondary_nav_child_link_inner">
                            <span class="secondary_nav_child_link_label">Future Students</span>
                        </div>
                    </a>
                </li>
                <li class="secondary_nav_child_item">
                    <a class="secondary_nav_child_link" href="#">
                        <div class="secondary_nav_child_link_inner">
                            <span class="secondary_nav_child_link_label">Newly Admitted Students</span>
                        </div>
                    </a>
                </li>
                <li class="secondary_nav_child_item">
                    <a class="secondary_nav_child_link" href="#">
                        <div class="secondary_nav_child_link_inner">
                            <span class="secondary_nav_child_link_label">Current Students</span>
                        </div>
                    </a>
                </li>
                <li class="secondary_nav_child_item">
                    <a class="secondary_nav_child_link" href="#">
                        <div class="secondary_nav_child_link_inner">
                            <span class="secondary_nav_child_link_label">Faculty & Staff</span>
                        </div>
                    </a>
                </li>
                <li class="secondary_nav_child_item">
                    <a class="secondary_nav_child_link" href="#">
                        <div class="secondary_nav_child_link_inner">
                            <span class="secondary_nav_child_link_label">Alumni</span>
                        </div>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
 
{#
	{% include '@navigation-basic' with {
		class: 'class',
		modifier: 'modifier',
		title: 'Title',
		active_index: '',
		links: [{ 'title': 'Page Title', 'url': '#', 'children': [] }],
		icon: 'icon_item',
		child_icon: 'icon_child'
	} %}
#}

{% set id = uniqid('basic_nav_title') %}

<nav class="{{ class }}_nav{% if modifier %} {{ class }}_nav_{{ modifier }}{% endif %}" aria-labelledby="{{ id }}">
	<div class="{{ class }}_nav_header">
		{% if header_icon %}
			<div class="{{ class }}_nav_header_icon">{{ icon(header_icon) }}</div>
		{% endif %}
		<h2 class="{{ class }}_nav_title" id="{{ id }}">
			<span class="{{ class }}_nav_title_label">{{ title }}</span>
		</h2>
	</div>
	<ul class="{{ class }}_nav_list" aria-labelledby="{{ id }}">
		{% for link in links %}
			<li class="{{ class }}_nav_item{% if link.class %} {{ link.class }}{% endif %}{% if link.children %} has_children{% endif %}{% if loop.index == active_index %} active{% endif %}">
				<a class="{{ class }}_nav_link{% if loop.index == active_index %} active{% endif %}" href="{{ link.url ?: '#' }}" {% if loop.index == active_index %} aria-current="page" {% endif %}>
					<div class="{{ class }}_nav_link_inner">
						{% if link.icon %}
							<span class="{{ class }}_nav_link_icon" aria-hidden="true">{{ icon(link.icon) }}</span>
						{% endif %}
						<span class="{{ class }}_nav_link_label">{{ link.title ?: link }}</span>
					</div>
				</a>
				{% if link.children %}
					<ul class="{{ class }}_nav_children" aria-label="{{ link.title ?: link }}">
						{% for child in link.children %}
							<li class="{{ class }}_nav_child_item">
								<a class="{{ class }}_nav_child_link" href="{{ child.url ?: '#' }}">
									<div class="{{ class }}_nav_child_link_inner">
										{% if child_icon %}
											<span class="{{ class }}_nav_child_link_icon" aria-hidden="true">{{ icon(child_icon) }}</span>
										{% endif %}
										<span class="{{ class }}_nav_child_link_label">{{ child.title ?: child }}</span>
									</div>
								</a>
							</li>
						{% endfor %}
					</ul>
				{% endif %}
			</li>
		{% endfor %}
	</ul>
</nav>

No notes defined.