Dream Academy Component Library

Menu 

<!-- Menu -->
<section class="menu" id="menu" data-js-menu aria-labelledby="menu__title">
    <div class="menu__inner">
        <div class="menu__header">
            <div class="fw-container">
                <div class="menu__header-inner">
                    <h1 class="menu__title" id="menu__title">Site Menu</h1>
                </div>
            </div>
        </div>
        <div class="menu__primary">
            <div class="fw-container">
                <div class="menu__primary-inner">
                    <div class="menu__search">

                        <div class="site-search site-search--menu" id="site-search-1" itemscope itemtype="https://schema.org/WebSite">
                            <meta itemprop="url" content="http://https://dream-academy.dev.fastspot.com/">
                            <form class="site-search__form" action="/components/preview/template-search" itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
                                <meta itemprop="target" content="http://https://dream-academy.dev.fastspot.com//components/preview/template-search?q={q}">
                                <label class="site-search__label" for="site-search-1_input">
                                    Search
                                </label>
                                <div class="site-search__field">
                                    <input class="site-search__input" id="site-search-1_input" itemprop="query-input" type="search" name="q" placeholder="Search by keyword" required>
                                    <div class="site-search__submit">

                                        <button class="button-bordered
 				" id="site-search-1_button" type="submit">
                                            <span class="button-bordered__inner"> <span class="button-bordered__label">Search</span>
                                                <span class="button-bordered__icon" aria-hidden="true"><svg class="icon icon--search">
                                                        <use href="/images/icons.svg?1.0.0#search" />
                                                    </svg></span>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="menu__main-nav">

                        <nav class="
		reveal-nav
		main-nav-dropdown
 		 			main-nav-dropdown--mobile-nav
 				dropdown-nav" id="reveal-nav-5" aria-labelledby="reveal-nav-5_title">
                            <div class="
			reveal-nav__header
			main-nav-dropdown__header
		">
                                <h1 class="reveal-nav__title main-nav-dropdown__title" id="reveal-nav-5_title">Main Site Links</h1>
                            </div>
                            <ul class="
			reveal-nav__list
			main-nav-dropdown__list
		" id="reveal-nav-5_list" aria-labelledby="reveal-nav-5_title">
                                <li class="
					reveal-nav__item
					main-nav-dropdown__item
																main-nav-dropdown__item--has-children
															" id="reveal-nav-5__item-1">
                                    <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-5__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
 		 			main-nav-dropdown__item-toggle--mobile-nav
 				reveal-nav__toggle " data-js-nav-reveal-toggle="" aria-labelledby="reveal-nav-5__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-5__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-5__item-2">
                                    <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-5__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
 		 			main-nav-dropdown__item-toggle--mobile-nav
 				reveal-nav__toggle " data-js-nav-reveal-toggle="" aria-labelledby="reveal-nav-5__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-5__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-5__item-3">
                                    <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-5__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
 		 			main-nav-dropdown__item-toggle--mobile-nav
 				reveal-nav__toggle " data-js-nav-reveal-toggle="" aria-labelledby="reveal-nav-5__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-5__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-5__item-4">
                                    <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-5__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
								">Student Life</span>
                                            </div>
                                        </a>

                                        <button class="main-nav-dropdown__item-toggle
 		 			main-nav-dropdown__item-toggle--mobile-nav
 				reveal-nav__toggle " data-js-nav-reveal-toggle="" aria-labelledby="reveal-nav-5__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-5__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
											">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>
                    </div>
                </div>
            </div>
        </div>
        <div class="menu__ribbon">
            <div class="fw-container">
                <div class="menu__ribbon-inner">

                    <div class="menu__secondary-nav">

                        <nav class="secondary-nav
 				" id="secondary-nav-2" aria-labelledby="secondary-nav-2__title">
                            <div class="secondary-nav__header">
                                <h1 class="secondary-nav__title" id="secondary-nav-2__title">Secondary Links</h1>
                            </div>
                            <ul class="secondary-nav__list" aria-labelledby="secondary-nav-2__title">
                                <li class="
						secondary-nav__item
														">
                                    <a class="
							secondary-nav__item-link
											" id="secondary-nav-2__link-1item-link" href="#">
                                        <div class="secondary-nav__item-link-inner">
                                            <span class="secondary-nav__item-link-label">News & Press</span>
                                        </div>
                                    </a>
                                </li>

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

                                <li class="
						secondary-nav__item
														">
                                    <a class="
							secondary-nav__item-link
											" id="secondary-nav-2__link-3item-link" href="#">
                                        <div class="secondary-nav__item-link-inner">
                                            <span class="secondary-nav__item-link-label">Photo Gallery</span>
                                        </div>
                                    </a>
                                </li>

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

        <div class="menu__secondary-nav-ctas">

            <a class="button-rounded
 				" href="#">
                <span class="button-rounded__inner"> <span class="button-rounded__label">Visit</span>
                </span>
            </a>

            <a class="button-rounded
 				" href="#">
                <span class="button-rounded__inner"> <span class="button-rounded__label">Make a Gift</span>
                </span>
            </a>

            <a class="button-rounded
 		 			button-rounded--alt
 				" href="#">
                <span class="button-rounded__inner"> <span class="button-rounded__label">Enroll</span>
                </span>
            </a>
        </div>

        <div class="menu__close">
            <div class="fw-container">
                <div class="menu__close-inner">
                    <div class="menu__close-button">

                        <button class="
		button-toggle
		button-text
 				" data-js-menu-close="">
                            <span class="
		button-toggle__inner
		button-toggle__inner--default
		button-text__inner
	"> <span class="button-toggle__label button-text__label">Close</span>
                                <span class="button-toggle__icon button-text__icon" aria-hidden="true">
                                    <svg class="icon icon--close">
                                        <use href="/images/icons.svg?1.0.0#close" />
                                    </svg>
                                </span>
                            </span> <span class="
			button-toggle__inner
			button-toggle__inner--active
			button-text__inner
		">
                                <span class="button-toggle__label button-text__label">Close</span>
                                <span class="button-toggle__icon button-text__icon" aria-hidden="true">
                                    <svg class="icon icon--close">
                                        <use href="/images/icons.svg?1.0.0#close" />
                                    </svg>
                                </span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END: Menu -->
 
{% set group_title = 'Site Menu' %}

{% set has_group_title = group_title is not empty %}
{% set heading_level = heading_level ?? 1 %}
{% set group_heading_tag = 'h' ~ (heading_level) %}
{% set item_heading_level = has_group_title ? heading_level + 1 : heading_level %}
{% set visit_cta = {'title': 'Visit', 'url': '#'} %}
{% set gift_cta = {'title': 'Make a Gift', 'url': '#'} %}
{% set enroll_cta = {'title': 'Enroll', 'url': '#'} %}

<!-- Menu -->
<section
	class="menu"
	id="menu"
	data-js-menu
	aria-labelledby="menu__title"
>
	<div class="menu__inner">
		<div class="menu__header">
			<div class="fw-container">
				<div class="menu__header-inner">
					<{{ group_heading_tag }}
						class="menu__title"
						id="menu__title"
					>
						{{- group_title -}}
					</{{ group_heading_tag }}>
				</div>
			</div>
		</div>
		<div class="menu__primary">
			<div class="fw-container">
				<div class="menu__primary-inner">
					<div class="menu__search">
						{% include '@partial-search' with {
							modifier: 'menu',
							label: 'Search',
							placeholder: 'Search by keyword',
							button_text: 'Search'
						} %}
					</div>
					<div class="menu__main-nav">
						{# {% include '@navigation-reveal' with {
							classes: {
								base: 'main-nav-collapse',
								modifiers: [],
								utility: 'collapse-nav'
							},
							title: 'Main Site Links',
							toggle: {
								classes: {
									utility: 'button-bordered'
								},
								icon: 'caret-down'
							},
							links: navigation.main
						} %} #}
						{% include '@navigation-reveal' with {
							classes: {
								base: 'main-nav-dropdown',
								modifiers: [ 'mobile-nav' ],
								utility: 'dropdown-nav'
							},
							title: 'Main Site Links',
							toggle: {
								icon: 'caret-down'
							},
							links: navigation.main
						} %}
					</div>
				</div>
			</div>
		</div>
		<div class="menu__ribbon">
			<div class="fw-container">
				<div class="menu__ribbon-inner">
					{# <div class="menu__audience-nav">
						{% include '@navigation-toggle' with {
							classes: {
								base: 'audience-nav',
								modifiers: [ 'menu' ],
								utility: 'toggle-nav-inline'
							},
							title: 'Audience Links',
							links: navigation.audience,
							icon: '',
							child_icon: '',
							toggle: {
								classes: {
									base: 'button-bordered'
								},
								default: {
									title: 'Audience',
									icon: 'plus'
								},
								active: {
									title: 'Close',
									icon: 'minus'
								}
							}
						} %}
					</div> #}
					<div class="menu__secondary-nav">
						{% include '@navigation-basic' with {
							classes: {
								base: 'secondary-nav',
								modifiers: [],
								utility: ''
							},
							title: 'Secondary Links',
							links: navigation.secondary
						} %}
					</div>
				</div>
			</div>
		</div>

		<div class="menu__secondary-nav-ctas">
			{% if visit_cta %}
				{% include '@partial-link' with {
					classes: {
						base: 'button-rounded'
					},
					title: visit_cta.title,
					url: visit_cta.url,
					icon: ''
				} only %}
			{% endif %}
			{% if gift_cta %}
				{% include '@partial-link' with {
					classes: {
						base: 'button-rounded'
					},
					title: gift_cta.title,
					url: gift_cta.url,
					icon: ''
				} only %}
			{% endif %}
			{% if enroll_cta %}
				{% include '@partial-link' with {
					classes: {
						base: 'button-rounded',
						modifiers: ['alt'],
					},
					title: enroll_cta.title,
					url: enroll_cta.url,
					icon: ''
				} only %}
			{% endif %}
		</div>

		<div class="menu__close">
			<div class="fw-container">
				<div class="menu__close-inner">
					<div class="menu__close-button">
						{% include '@partial-button-toggle' with {
							classes: {
								base: 'button-text'
							},
							attributes: {
								'data-js-menu-close': '',
							},
							default: {
								title: 'Close',
								icon: 'close'
							},
							active: {
								title: 'Close',
								icon: 'close'
							}
						} only %}
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- END: Menu -->

No notes defined.