Framework Component Library

Basic 

<nav class="
		secondary
					secondary_demo
				
	" id="secondary_1" aria-labelledby="secondary_1_title">
    <div class="secondary_header">
        <h2 class="secondary_title" id="secondary_1_title">
            Basic
        </h2>
    </div>
    <ul class="secondary_list" aria-labelledby="secondary_1_title">

        <li class="
					secondary_item
														">
            <a class="secondary_link" id="secondary_1_link_1" href="#">
                <div class="secondary_link_inner">
                    <span class="secondary_link_label">
                        News
                    </span>
                </div>
            </a>
        </li>

        <li class="
					secondary_item
														">
            <a class="secondary_link" id="secondary_1_link_2" href="#">
                <div class="secondary_link_inner">
                    <span class="secondary_link_label">
                        Events
                    </span>
                </div>
            </a>
        </li>

        <li class="
					secondary_item
														">
            <a class="secondary_link" id="secondary_1_link_3" href="#">
                <div class="secondary_link_inner">
                    <span class="secondary_link_label">
                        Directory
                    </span>
                </div>
            </a>
        </li>

        <li class="
					secondary_item
														">
            <a class="secondary_link" id="secondary_1_link_4" href="#">
                <div class="secondary_link_inner">
                    <span class="secondary_link_label">
                        Giving
                    </span>
                </div>
            </a>
        </li>

        <li class="
					secondary_item
														">
            <a class="secondary_link" id="secondary_1_link_5" href="#">
                <div class="secondary_link_inner">
                    <span class="secondary_link_label">
                        Visit
                    </span>
                </div>
            </a>
        </li>
    </ul>
</nav>
 
{#
	{% include '@navigation-basic' with {
		classes: {
			base: 'classes',
			modifiers: [],
			utility: ''
		},
		title: 'Title',
		active_index: '',
		links: [{ 'title': 'Page Title', 'url': '#', 'children': [] }],
		icon: 'icon_item',
		child_icon: 'icon_child'
	} %}
#}

{% set id = uniqid(classes.base) %}

<nav
	class="
		{{ classes.base }}
		{% for modifier in classes.modifiers %}
			{{ classes.base ~ '_' ~ modifier }}
		{% endfor %}
		{{ classes.utility }}
	"
	id="{{ id }}"
	aria-labelledby="{{ id }}_title"
>
	<div class="{{ classes.base }}_header">
		<h2 class="{{ classes.base }}_title" id="{{ id }}_title">
			{{ title }}
		</h2>
	</div>
	<ul class="{{ classes.base }}_list" aria-labelledby="{{ id }}_title">
		{% for link in links %}
			{% set item_id = id ~ '_link_' ~ loop.index %}
			{% set is_active = loop.index == active_index %}

			<li
				class="
					{{ classes.base }}_item
					{% if link.children %}has_children{% endif %}
					{% if is_active %} active{% endif %}
				"
			>
				<a
					class="{{ classes.base }}_link{% if is_active %} active{% endif %}"
					id="{{ item_id }}"
					href="{{ link.url ?: '#' }}"
					{% if is_active %}aria-current="page"{% endif %}
				>
					<div class="{{ classes.base }}_link_inner">
						<span class="{{ classes.base }}_link_label">
							{{ link.title ?: link }}
						</span>
						{% if icon or link.icon %}
							<span class="{{ classes.base }}_link_icon" aria-hidden="true">
								{{ icon(link.icon ?: icon) }}
							</span>
						{% endif %}
					</div>
				</a>
				{% if link.children %}
					<ul class="{{ classes.base }}_children" aria-labelledby="{{ item_id }}">
						{% for child in link.children %}
							<li class="{{ classes.base }}_child_item">
								<a class="{{ classes.base }}_child_link" href="{{ child.url ?: '#' }}">
									<div class="{{ classes.base }}_child_link_inner">
										<span class="{{ classes.base }}_child_link_label">
											{{ child.title ?: child }}
										</span>
										{% if child_icon or child.icon %}
											<span class="{{ classes.base }}_child_link_icon" aria-hidden="true">
												{{ icon(child.icon ?: child_icon) }}
											</span>
										{% endif %}
									</div>
								</a>
							</li>
						{% endfor %}
					</ul>
				{% endif %}
			</li>
		{% endfor %}
	</ul>
</nav>

No notes defined.