Framework Component Library

Toggle: Overlay 

<!-- Toggle Navigation -->
<div class="
		audience-nav
 		 			audience-nav--header
 				" id="audience-nav-3">
    <div class="audience-nav__button">

        <button class="button-bordered
 				audience-nav__trigger" popovertarget="audience-nav-3__panel">
            <span class="button-bordered__inner"> <span class="button-bordered__label">Audience</span>
                <span class="button-bordered__icon" aria-hidden="true"><svg class="icon icon--plus">
                        <use href="/images/icons.svg?1.0.0#plus" />
                    </svg></span>
            </span>
        </button>
    </div>
    <div class="audience-nav__panel" id="audience-nav-3__panel" popover="auto" data-js-popover='{"hover":true,"closeOnBlur":true}'>

        <nav class="audience-nav
 				" id="audience-nav-4" aria-labelledby="audience-nav-4__title">
            <div class="audience-nav__header">
                <h2 class="audience-nav__title" id="audience-nav-4__title">Audience Links</h2>
            </div>
            <ul class="audience-nav__list" aria-labelledby="audience-nav-4__title">
                <li class="
						audience-nav__item
														">
                    <a class="
							audience-nav__item-link
											" id="audience-nav-4__link-1item-link" href="#">
                        <div class="audience-nav__item-link-inner">
                            <span class="audience-nav__item-link-label">Faculty</span>
                        </div>
                    </a>
                </li>

                <li class="
						audience-nav__item
														">
                    <a class="
							audience-nav__item-link
											" id="audience-nav-4__link-2item-link" href="#">
                        <div class="audience-nav__item-link-inner">
                            <span class="audience-nav__item-link-label">Staff</span>
                        </div>
                    </a>
                </li>

                <li class="
						audience-nav__item
														">
                    <a class="
							audience-nav__item-link
											" id="audience-nav-4__link-3item-link" href="#">
                        <div class="audience-nav__item-link-inner">
                            <span class="audience-nav__item-link-label">Current Students</span>
                        </div>
                    </a>
                </li>

                <li class="
						audience-nav__item
														">
                    <a class="
							audience-nav__item-link
											" id="audience-nav-4__link-4item-link" href="#">
                        <div class="audience-nav__item-link-inner">
                            <span class="audience-nav__item-link-label">Prospective Student</span>
                        </div>
                    </a>
                </li>

                <li class="
						audience-nav__item
														">
                    <a class="
							audience-nav__item-link
											" id="audience-nav-4__link-5item-link" href="#">
                        <div class="audience-nav__item-link-inner">
                            <span class="audience-nav__item-link-label">Alumni</span>
                        </div>
                    </a>
                </li>

                <li class="
						audience-nav__item
														">
                    <a class="
							audience-nav__item-link
											" id="audience-nav-4__link-6item-link" href="#">
                        <div class="audience-nav__item-link-inner">
                            <span class="audience-nav__item-link-label">Parents & Families</span>
                        </div>
                    </a>
                </li>

                <li class="
						audience-nav__item
														">
                    <a class="
							audience-nav__item-link
											" id="audience-nav-4__link-7item-link" href="#">
                        <div class="audience-nav__item-link-inner">
                            <span class="audience-nav__item-link-label">Visitors</span>
                        </div>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>
<!-- END: Toggle Navigation -->
 
{#
	{% include '@navigation-toggle' with {
		classes: {
			base: 'class',
			modifiers: ['modifier'],
			utility: ''
		},
		attributes: {
			'attribute': 'value'
		},
		title: 'Title',
		links: [{ 'title': 'Page Title', 'url': '#' }],
		icon: 'icon_item',
		popover: false,
		button: {
			classes: {
				base: 'button-bordered'
			},
			title: 'Toggle',
			icon: 'plus'
		},
		settings: {}
	} %}
#}

{% set id = uniqid(classes.base) %}
{% set heading_level = heading_level ?? 2 %}
{% set panel_id = id ~ '__panel' %}
{% set is_popover = popover ?? false %}

<!-- Toggle Navigation -->
<div
	class="
		{{ classes.base }}
 		{% for modifier in classes.modifiers %}
 			{{ classes.base ~ '--' ~ modifier }}
 		{% endfor %}
		{{ classes.utility -}}
	"
	id="{{ id }}"
	{% for attribute, value in attributes %}
		{{ attribute }}="{{ value }}"
	{% endfor %}
	{% if not is_popover %}
		data-js-disclosure{% if settings is not empty %}='{{ settings|json_encode }}'{% endif %}
	{% endif %}
>
	<div class="{{ classes.base ~ '__button' }}">
		{% include '@partial-button' with {
			classes: {
				base: button.classes.base ?? 'button-bordered',
				modifiers: button.classes.modifiers ?? [],
				utility: button.classes.utility ?? ''
			},
			attributes: is_popover ? {
				'popovertarget': panel_id
			} : {
				'data-js-disclosure-button': '',
				'aria-controls': panel_id
			},
			title: button.title ?? 'Toggle',
			icon: button.icon ?? null
		} only %}
	</div>
	<div
		class="{{ classes.base ~ '__panel' }}"
		id="{{ panel_id }}"
		{% if is_popover %}
			popover="auto"
			data-js-popover{% if settings is not empty %}='{{ settings|json_encode }}'{% endif %}
		{% else %}
			data-js-disclosure-panel
			hidden
		{% endif %}
	>
		{% include '@navigation-basic' with {
			classes: {
				base: classes.base,
				modifiers: [],
				utility: ''
			},
			title: title,
			heading_level: heading_level,
			links: links,
			icon: icon ?? ''
		} %}
	</div>
</div>
<!-- END: Toggle Navigation -->

No notes defined.