JHU Carey Centers Component Library

Basic 

<nav class="secondary_nav secondary_nav_demo" aria-labelledby="basic_nav_title-1">
    <div class="secondary_nav_header">
        <h2 class="secondary_nav_title" id="basic_nav_title-1">Basic</h2>
    </div>
    <ul class="secondary_nav_list" aria-labelledby="basic_nav_title-1">
        <li class="secondary_nav_item">
            <a class="secondary_nav_link" href="#">
                <div class="secondary_nav_link_inner">
                    <span class="secondary_nav_link_label">Give</span>
                </div>
            </a>
        </li>
        <li class="secondary_nav_item">
            <a class="secondary_nav_link" href="#">
                <div class="secondary_nav_link_inner">
                    <span class="secondary_nav_link_label">Request Info</span>
                </div>
            </a>
        </li>
        <li class="secondary_nav_item">
            <a class="secondary_nav_link" href="#">
                <div class="secondary_nav_link_inner">
                    <span class="secondary_nav_link_label">JHU</span>
                </div>
            </a>
        </li>
    </ul>
</nav>
 
{#
	{% include '@navigation-basic' with {
		class: 'class',
		modifier: 'modifier',
		title: 'Title',
		active_index: '',
		duplicate_title: false,
		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">
		<h2 class="{{ class }}_nav_title" id="{{ id }}">{{ title }}</h2>
	</div>
	<ul class="{{ class }}_nav_list" aria-labelledby="{{ id }}">
		{% for link in links %}
			<li class="{{ class }}_nav_item{% 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 icon %}
							<span class="{{ class }}_nav_link_icon" aria-hidden="true">{{ icon(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>
	{% if duplicate_title %}
		<div class="{{ class }}_nav_header {{ class }}_nav_header_copy" aria-hidden="true">
			<h2 class="{{ class }}_nav_title {{ class }}_nav_title_copy">{{ title }}</h2>
		</div>
	{% endif %}
</nav>

No notes defined.