Framework Component Library

Toggle: Overlay 

<div class="
		toggle-nav
		audience-nav
 				toggle-nav-overlay" id="toggle-nav-2" data-js-nav-toggle-group>
    <div class="
			toggle-nav__button
			audience-nav__button
		">

        <button class="
		button-toggle
		button-bordered
 				" id="toggle-nav-2__button-toggle" data-js-nav-toggle-button="" data-js-swap="" data-swap-target="#toggle-nav-2">
            <span class="
		button-toggle__inner
		button-toggle__inner--default
		button-bordered__inner
	"> <span class="button-toggle__label button-bordered__label">Audience</span>
                <span class="button-toggle__icon button-bordered__icon" aria-hidden="true">
                    <svg class="icon icon--plus">
                        <use href="/images/icons.svg?1.0.0#plus" />
                    </svg>
                </span>
            </span> <span class="
			button-toggle__inner
			button-toggle__inner--active
			button-bordered__inner
		">
                <span class="button-toggle__label button-bordered__label">Close</span>
                <span class="button-toggle__icon button-bordered__icon" aria-hidden="true">
                    <svg class="icon icon--minus">
                        <use href="/images/icons.svg?1.0.0#minus" />
                    </svg>
                </span>
            </span>
        </button>
    </div>
    <div class="
			toggle-nav__panel
			audience-nav__panel
		" data-js-nav-toggle-panel>
        <nav class="
				toggle-nav__nav
				audience-nav__nav
			" id="toggle-nav-2__nav" aria-labelledby="toggle-nav-2__title">
            <div class="
					toggle-nav__header
					audience-nav__header
				">
                <h2 class="
						toggle-nav__title
						audience-nav__title
					" id="toggle-nav-2__title">Audience</h2>
            </div>
            <ul class="
					toggle-nav__list
					audience-nav__list
				" id="toggle-nav-2__list" aria-labelledby="toggle-nav-2__title">
                <li class="
							toggle-nav__item
							audience-nav__item
													" id="toggle-nav-2__item-1" data-js-nav-toggle-item>
                    <a class="
								toggle-nav__item-link
								audience-nav__item-link
															" id="toggle-nav-2__item-1__item-link" href="#" data-js-nav-toggle-link>
                        <div class="
									toggle-nav__item-link-inner
									audience-nav__item-link-inner
								">
                            <span class="
										toggle-nav__link-label
										audience-nav__link-label
									">Faculty</span>
                        </div>
                    </a>
                </li>

                <li class="
							toggle-nav__item
							audience-nav__item
													" id="toggle-nav-2__item-2" data-js-nav-toggle-item>
                    <a class="
								toggle-nav__item-link
								audience-nav__item-link
															" id="toggle-nav-2__item-2__item-link" href="#" data-js-nav-toggle-link>
                        <div class="
									toggle-nav__item-link-inner
									audience-nav__item-link-inner
								">
                            <span class="
										toggle-nav__link-label
										audience-nav__link-label
									">Staff</span>
                        </div>
                    </a>
                </li>

                <li class="
							toggle-nav__item
							audience-nav__item
													" id="toggle-nav-2__item-3" data-js-nav-toggle-item>
                    <a class="
								toggle-nav__item-link
								audience-nav__item-link
															" id="toggle-nav-2__item-3__item-link" href="#" data-js-nav-toggle-link>
                        <div class="
									toggle-nav__item-link-inner
									audience-nav__item-link-inner
								">
                            <span class="
										toggle-nav__link-label
										audience-nav__link-label
									">Current Students</span>
                        </div>
                    </a>
                </li>

                <li class="
							toggle-nav__item
							audience-nav__item
													" id="toggle-nav-2__item-4" data-js-nav-toggle-item>
                    <a class="
								toggle-nav__item-link
								audience-nav__item-link
															" id="toggle-nav-2__item-4__item-link" href="#" data-js-nav-toggle-link>
                        <div class="
									toggle-nav__item-link-inner
									audience-nav__item-link-inner
								">
                            <span class="
										toggle-nav__link-label
										audience-nav__link-label
									">Prospective Student</span>
                        </div>
                    </a>
                </li>

                <li class="
							toggle-nav__item
							audience-nav__item
													" id="toggle-nav-2__item-5" data-js-nav-toggle-item>
                    <a class="
								toggle-nav__item-link
								audience-nav__item-link
															" id="toggle-nav-2__item-5__item-link" href="#" data-js-nav-toggle-link>
                        <div class="
									toggle-nav__item-link-inner
									audience-nav__item-link-inner
								">
                            <span class="
										toggle-nav__link-label
										audience-nav__link-label
									">Alumni</span>
                        </div>
                    </a>
                </li>

                <li class="
							toggle-nav__item
							audience-nav__item
													" id="toggle-nav-2__item-6" data-js-nav-toggle-item>
                    <a class="
								toggle-nav__item-link
								audience-nav__item-link
															" id="toggle-nav-2__item-6__item-link" href="#" data-js-nav-toggle-link>
                        <div class="
									toggle-nav__item-link-inner
									audience-nav__item-link-inner
								">
                            <span class="
										toggle-nav__link-label
										audience-nav__link-label
									">Parents & Families</span>
                        </div>
                    </a>
                </li>

                <li class="
							toggle-nav__item
							audience-nav__item
													" id="toggle-nav-2__item-7" data-js-nav-toggle-item>
                    <a class="
								toggle-nav__item-link
								audience-nav__item-link
															" id="toggle-nav-2__item-7__item-link" href="#" data-js-nav-toggle-link>
                        <div class="
									toggle-nav__item-link-inner
									audience-nav__item-link-inner
								">
                            <span class="
										toggle-nav__link-label
										audience-nav__link-label
									">Visitors</span>
                        </div>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>
 
{#
	{% include '@navigation-toggle' with {
		classes: {
			base: 'class',
			modifiers: ['modifier'],
			utility: ''
		},
		attributes: {
			'attribute': 'value'
		},
		title: 'Title',
		links: [{ 'title': 'Page Title', 'url': '#', 'children': [] }],
		icon: 'icon_item',
		child_icon: 'icon_child',
		toggle: {
			classes: {
				base: 'base',
				modifiers: [ 'modifier' ]
			},
			attributes: {
				'attribute': 'value'
			},
			default: {
				title: 'Audience',
				icon: 'plus'
			},
			active: {
				title: 'Close',
				icon: 'minus'
			}
		}
	} %}
#}

{% set id = uniqid('toggle-nav') %}

<div
	class="
		toggle-nav
		{{ classes.base }}
 		{% for modifier in classes.modifiers %}
 			{{ classes.base ~ '--' ~ modifier }}
 		{% endfor %}
		{{ classes.utility -}}
	"
	id="{{ id }}"
	data-js-nav-toggle-group
	{% for attribute, value in attributes %}
		{{ attribute }}="{{ value }}"
	{% endfor %}
>
	<div
		class="
			toggle-nav__button
			{{ classes.base ~ '__button' }}
		"
	>
		{% include '@partial-button-toggle' with {
			classes: {
				base: toggle.classes.base,
				modifiers: toggle.classes.modifiers,
				utility: toggle.classes.utility
			},
			id: id ~ '__button-toggle',
			attributes: {
				'data-js-nav-toggle-button': '',
				'data-js-swap': '',
				'data-swap-target': '#' ~ id,
				toggle.attributes
			},
			default: {
				title: toggle.default.title,
				icon: toggle.default.icon
			},
			active: {
				title: toggle.active.title,
				icon: toggle.active.icon
			}
		} only %}
	</div>
	<div
		class="
			toggle-nav__panel
			{{ classes.base ~ '__panel' }}
		"
		data-js-nav-toggle-panel
	>
		<nav
			class="
				toggle-nav__nav
				{{ classes.base ~ '__nav' }}
			"
			id="{{ id ~ '__nav' }}"
			aria-labelledby="{{ id ~ '__title' }}"
		>
			<div
				class="
					toggle-nav__header
					{{ classes.base ~ '__header' }}
				"
			>
				<h2
					class="
						toggle-nav__title
						{{ classes.base ~ '__title' }}
					"
					id="{{ id ~ '__title' }}"
				>
					{{- title -}}
				</h2>
			</div>
			<ul
				class="
					toggle-nav__list
					{{ classes.base ~ '__list' }}
				"
				id="{{ id ~ '__list' }}"
				aria-labelledby="{{ id ~ '__title' }}"
			>
				{% for link in links %}
					{% set item_id = id ~ '__item-' ~ loop.index %}

					<li
						class="
							toggle-nav__item
							{{ classes.base ~ '__item' }}
							{% if link.active %}
								{{ classes.base ~ '__item--is-open' }}
							{% endif %}
						"
						id="{{ item_id }}"
						data-js-nav-toggle-item
					>
						<a
							class="
								toggle-nav__item-link
								{{ classes.base ~ '__item-link' }}
								{% if link.active %}
									{{ classes.base ~ '__item-link--is-active' }}
								{% endif %}
							"
							id="{{ item_id ~ '__item-link' }}"
							href="{{ link.url ?: '#' }}"
							data-js-nav-toggle-link
							{% if link.active %}
								aria-current="page"
							{% endif %}
						>
							<div
								class="
									toggle-nav__item-link-inner
									{{ classes.base ~ '__item-link-inner' }}
								"
							>
								<span
									class="
										toggle-nav__link-label
										{{ classes.base ~ '__link-label' }}
									"
								>
									{{- link.title ?: link -}}
								</span>
								{% if icon or link.icon %}
									<span
										class="
											toggle-nav__item-link-icon
											{{ classes.base ~ '__item-link-icon' }}
										"
										aria-hidden="true"
									>
										{{ icon(link.icon ?: icon) }}
									</span>
								{% endif %}
							</div>
						</a>
					</li>
				{% endfor %}
			</ul>
		</nav>
	</div>
</div>

No notes defined.