Framework Component Library

Reveal: Dropdown 

<nav class="
		reveal-nav
		main-nav-dropdown
 				dropdown-nav" id="reveal-nav-2" aria-labelledby="reveal-nav-2_title">
    <div class="
			reveal-nav__header
			main-nav-dropdown__header
		">
        <h2 class="reveal-nav__title main-nav-dropdown__title" id="reveal-nav-2_title">Site</h2>
    </div>
    <ul class="
			reveal-nav__list
			main-nav-dropdown__list
		" id="reveal-nav-2_list" aria-labelledby="reveal-nav-2_title">
        <li class="
					reveal-nav__item
					main-nav-dropdown__item
																main-nav-dropdown__item--has-children
															" id="reveal-nav-2__item-1" data-js-nav-reveal-item>
            <div class="
						reveal-nav__item-inner
						main-nav-dropdown__item-inner
					">
                <a class="
							reveal-nav__item-link
							main-nav-dropdown__item-link
													" id="reveal-nav-2__item-1-item-link" href="#">
                    <div class="
								reveal-nav__item-link-inner
								main-nav-dropdown__item-link-inner
							">
                        <span class="
									reveal-nav__item-link-label
									main-nav-dropdown__item-link-label
								">About</span>
                    </div>
                </a>

                <button class="main-nav-dropdown__item-toggle
 				reveal-nav__toggle " data-js-swap="" data-swap-target="#reveal-nav-2__item-1" data-swap-group="reveal-nav-2" data-js-nav-reveal-toggle="" aria-labelledby="reveal-nav-2__item-1-item-link">
                    <span class="main-nav-dropdown__item-toggle-inner"> <span class="main-nav-dropdown__item-toggle-icon" aria-hidden="true"><svg class="icon icon--caret-down">
                                <use href="/images/icons.svg?1.0.0#caret-down" />
                            </svg></span>
                    </span>
                </button>
            </div>
            <ul class="
							reveal-nav__children
							main-nav-dropdown__children
						" data-js-nav-reveal-children aria-labelledby="reveal-nav-2__item-1-item-link">
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Lorem ipsum</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Consectetuer Adipiscing Elit</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Aenean Commodo</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Penatibus et Magnis dis Parturient Montes Sapien ut Liber</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Aenean Massa</span>
                        </div>
                    </a>
                </li>
            </ul>
        </li>

        <li class="
					reveal-nav__item
					main-nav-dropdown__item
																main-nav-dropdown__item--has-children
															" id="reveal-nav-2__item-2" data-js-nav-reveal-item>
            <div class="
						reveal-nav__item-inner
						main-nav-dropdown__item-inner
					">
                <a class="
							reveal-nav__item-link
							main-nav-dropdown__item-link
													" id="reveal-nav-2__item-2-item-link" href="#">
                    <div class="
								reveal-nav__item-link-inner
								main-nav-dropdown__item-link-inner
							">
                        <span class="
									reveal-nav__item-link-label
									main-nav-dropdown__item-link-label
								">Academics</span>
                    </div>
                </a>

                <button class="main-nav-dropdown__item-toggle
 				reveal-nav__toggle " data-js-swap="" data-swap-target="#reveal-nav-2__item-2" data-swap-group="reveal-nav-2" data-js-nav-reveal-toggle="" aria-labelledby="reveal-nav-2__item-2-item-link">
                    <span class="main-nav-dropdown__item-toggle-inner"> <span class="main-nav-dropdown__item-toggle-icon" aria-hidden="true"><svg class="icon icon--caret-down">
                                <use href="/images/icons.svg?1.0.0#caret-down" />
                            </svg></span>
                    </span>
                </button>
            </div>
            <ul class="
							reveal-nav__children
							main-nav-dropdown__children
						" data-js-nav-reveal-children aria-labelledby="reveal-nav-2__item-2-item-link">
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Nam Quam Nunc</span>
                        </div>
                    </a>
                </li>
            </ul>
        </li>

        <li class="
					reveal-nav__item
					main-nav-dropdown__item
											main-nav-dropdown__item--is-open
																main-nav-dropdown__item--has-children
															" id="reveal-nav-2__item-3" data-js-nav-reveal-item>
            <div class="
						reveal-nav__item-inner
						main-nav-dropdown__item-inner
					">
                <a class="
							reveal-nav__item-link
							main-nav-dropdown__item-link
															main-nav-dropdown__link--is-active
													" id="reveal-nav-2__item-3-item-link" href="#" aria-current="page">
                    <div class="
								reveal-nav__item-link-inner
								main-nav-dropdown__item-link-inner
							">
                        <span class="
									reveal-nav__item-link-label
									main-nav-dropdown__item-link-label
								">Admissions</span>
                    </div>
                </a>

                <button class="main-nav-dropdown__item-toggle
 				reveal-nav__toggle " data-js-swap="" data-swap-target="#reveal-nav-2__item-3" data-swap-group="reveal-nav-2" data-js-nav-reveal-toggle="" aria-labelledby="reveal-nav-2__item-3-item-link">
                    <span class="main-nav-dropdown__item-toggle-inner"> <span class="main-nav-dropdown__item-toggle-icon" aria-hidden="true"><svg class="icon icon--caret-down">
                                <use href="/images/icons.svg?1.0.0#caret-down" />
                            </svg></span>
                    </span>
                </button>
            </div>
            <ul class="
							reveal-nav__children
							main-nav-dropdown__children
						" data-js-nav-reveal-children aria-labelledby="reveal-nav-2__item-3-item-link">
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Nam quam nunc</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Blandit Vel</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Donec Vitae Sapien</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Ut Libero</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Venenatis Faucibus</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Nullam Quis Ante</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Orci Eget Eros Faucibus Tincidunt Maecenas Tempus Tellus Eget Condimentum</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Sed Fringilla Mauris Sit</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Amet Nibh</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Donec Sodales Sagittis</span>
                        </div>
                    </a>
                </li>
            </ul>
        </li>

        <li class="
					reveal-nav__item
					main-nav-dropdown__item
																main-nav-dropdown__item--has-children
															" id="reveal-nav-2__item-4" data-js-nav-reveal-item>
            <div class="
						reveal-nav__item-inner
						main-nav-dropdown__item-inner
					">
                <a class="
							reveal-nav__item-link
							main-nav-dropdown__item-link
													" id="reveal-nav-2__item-4-item-link" href="#">
                    <div class="
								reveal-nav__item-link-inner
								main-nav-dropdown__item-link-inner
							">
                        <span class="
									reveal-nav__item-link-label
									main-nav-dropdown__item-link-label
								">Financial Aid</span>
                    </div>
                </a>

                <button class="main-nav-dropdown__item-toggle
 				reveal-nav__toggle " data-js-swap="" data-swap-target="#reveal-nav-2__item-4" data-swap-group="reveal-nav-2" data-js-nav-reveal-toggle="" aria-labelledby="reveal-nav-2__item-4-item-link">
                    <span class="main-nav-dropdown__item-toggle-inner"> <span class="main-nav-dropdown__item-toggle-icon" aria-hidden="true"><svg class="icon icon--caret-down">
                                <use href="/images/icons.svg?1.0.0#caret-down" />
                            </svg></span>
                    </span>
                </button>
            </div>
            <ul class="
							reveal-nav__children
							main-nav-dropdown__children
						" data-js-nav-reveal-children aria-labelledby="reveal-nav-2__item-4-item-link">
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Aliquam Lorem Ante</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Quisque Rutrum</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Aeneanimperdiet</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Tellus Eget Condimentum</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Duis Leo</span>
                        </div>
                    </a>
                </li>
            </ul>
        </li>

        <li class="
					reveal-nav__item
					main-nav-dropdown__item
																main-nav-dropdown__item--has-children
															" id="reveal-nav-2__item-5" data-js-nav-reveal-item>
            <div class="
						reveal-nav__item-inner
						main-nav-dropdown__item-inner
					">
                <a class="
							reveal-nav__item-link
							main-nav-dropdown__item-link
													" id="reveal-nav-2__item-5-item-link" href="#">
                    <div class="
								reveal-nav__item-link-inner
								main-nav-dropdown__item-link-inner
							">
                        <span class="
									reveal-nav__item-link-label
									main-nav-dropdown__item-link-label
								">Student Life</span>
                    </div>
                </a>

                <button class="main-nav-dropdown__item-toggle
 				reveal-nav__toggle " data-js-swap="" data-swap-target="#reveal-nav-2__item-5" data-swap-group="reveal-nav-2" data-js-nav-reveal-toggle="" aria-labelledby="reveal-nav-2__item-5-item-link">
                    <span class="main-nav-dropdown__item-toggle-inner"> <span class="main-nav-dropdown__item-toggle-icon" aria-hidden="true"><svg class="icon icon--caret-down">
                                <use href="/images/icons.svg?1.0.0#caret-down" />
                            </svg></span>
                    </span>
                </button>
            </div>
            <ul class="
							reveal-nav__children
							main-nav-dropdown__children
						" data-js-nav-reveal-children aria-labelledby="reveal-nav-2__item-5-item-link">
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Aenean Vulputate Eleifend Tellus</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Nascetur</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Ridiculus Mus</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Pellentesque Eu</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Vivamus Elementum Semper</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Aenean Vulputate</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Aenean Leo Ligula</span>
                        </div>
                    </a>
                </li>
                <li class="
									reveal-nav__child-item
									main-nav-dropdown__child-item
																	" data-js-nav-reveal-child-item>
                    <a class="
										reveal-nav__child-link
										main-nav-dropdown__child-link
																			" data-js-nav-reveal-child-link href="#">
                        <div class="
											reveal-nav__item-link-inner
											main-nav-dropdown__item-link-inner
										">
                            <span class="
												reveal-nav__child-link-label
												main-nav-dropdown__child-link-label
											">Semper Libero</span>
                        </div>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
 
{#
	{% include '@navigation-reveal' with {
		classes: {
			base: 'class',
			modifiers: ['modifier'],
			utility: ''
		},
		attributes: {
			'attribute': 'value'
		},
		title: 'Title',
		toggle: {
			classes: {
				base: 'base',
				modifiers: [
					'modifier'
				]
			},
			icon: 'icon_toggle'
		},
		links: [{ 'title': 'Page Title', 'url': '#', 'children': [] }],
		icon: 'icon_item',
		child_icon: 'icon_child'
	} %}
#}

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

<nav
	class="
		reveal-nav
		{{ classes.base }}
 		{% for modifier in classes.modifiers %}
 			{{ classes.base ~ '--' ~ modifier }}
 		{% endfor %}
		{{ classes.utility -}}
	"
	id="{{ id }}"
	{% for attribute, value in attributes %}
		{{ attribute }}="{{ value }}"
	{% endfor %}
	aria-labelledby="{{ id ~ '_title' }}"
>
	<div
		class="
			reveal-nav__header
			{{ classes.base ~ '__header' }}
		"
	>
		<h2 class="reveal-nav__title {{ classes.base ~ '__title' }}" id="{{ id ~ '_title' }}">
			{{- title -}}
		</h2>
	</div>
	<ul
		class="
			reveal-nav__list
			{{ classes.base ~ '__list' }}
		"
		id="{{ id ~ '_list' }}"
		aria-labelledby="{{ id ~ '_title' }}"
	>
		{% for link in links %}
			{% set item_id = id ~ '__item-' ~ loop.index %}
			{% set has_active_children = false %}
			{% for child in link.children %}
				{% if child.active %}
					{% set has_active_children = true %}
				{% endif %}
			{% endfor %}

			<li
				class="
					reveal-nav__item
					{{ classes.base ~ '__item' }}
					{% if link.active %}
						{{ classes.base ~ '__item--is-open' }}
					{% endif %}
					{% if link.children %}
						{{ classes.base ~ '__item--has-children' }}
						{% if has_active_children %}
							{{ classes.base ~ '__item--is-open' }}
						{% endif %}
					{% endif %}
				"
				id="{{ item_id }}"
				data-js-nav-reveal-item
			>
				<div
					class="
						reveal-nav__item-inner
						{{ classes.base ~ '__item-inner' }}
					"
				>
					<a
						class="
							reveal-nav__item-link
							{{ classes.base ~ '__item-link' }}
							{% if link.active %}
								{{ classes.base ~ '__link--is-active' }}
							{% endif %}
						"
						id="{{ item_id ~ '-item-link' }}"
						href="{{ link.url ?: '#' }}"
						{% if link.active %}
							aria-current="page"
						{% endif %}
					>
						<div
							class="
								reveal-nav__item-link-inner
								{{ classes.base ~ '__item-link-inner' }}
							"
						>
							<span
								class="
									reveal-nav__item-link-label
									{{ classes.base ~ '__item-link-label' }}
								"
							>
								{{- link.title ?: link -}}
							</span>
							{% if icon or link.icon %}
								<span
									class="
										reveal-nav__item-link-icon
										{{ classes.base ~ '__item-link-icon' }}
									"
									aria-hidden="true"
								>
									{{ icon(link.icon ?: icon) }}
								</span>
							{% endif %}
						</div>
					</a>
					{% if link.children %}
						{% include '@partial-button' with {
							classes: {
								base: classes.base ~ '__item-toggle',
								modifiers: classes.modifiers,
								utility: 'reveal-nav__toggle ' ~ toggle.classes.utility
							},
							attributes: {
								'data-js-swap': '',
								'data-swap-target': '#' ~ item_id,
								'data-swap-group': id,
								'data-js-nav-reveal-toggle': '',
								'aria-labelledby': item_id ~ '-item-link'
							},
							title: null,
							icon: toggle.icon
						} only %}
					{% endif %}
				</div>
				{% if link.children %}
					<ul
						class="
							reveal-nav__children
							{{ classes.base ~ '__children' }}
						"
						data-js-nav-reveal-children
						aria-labelledby="{{ item_id ~ '-item-link' }}"
					>
						{% for child in link.children %}
							<li
								class="
									reveal-nav__child-item
									{{ classes.base ~ '__child-item' }}
									{% if child.active %}
										{{ classes.base ~ '__child-item--is-open' }}
									{% endif %}
								"
								data-js-nav-reveal-child-item
							>
								<a
									class="
										reveal-nav__child-link
										{{ classes.base ~ '__child-link' }}
										{% if child.active %}
											{{ classes.base ~ '__child-link--is-active' }}
										{% endif %}
									"
									data-js-nav-reveal-child-link
									href="{{ child.url ?: '#' }}"
									{% if child.active %}
										aria-current="page"
									{% endif %}
								>
									<div
										class="
											reveal-nav__item-link-inner
											{{ classes.base ~ '__item-link-inner' }}
										"
									>
										<span
											class="
												reveal-nav__child-link-label
												{{ classes.base ~ '__child-link-label' }}
											"
										>
											{{- child.title ?: child -}}
										</span>
										{% if child_icon or child.icon %}
											<span
												class="
													reveal-nav__child-link-icon
													{{ 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.