Menu with Search
JSThis component requires JavaScript.
Component status:Ready
An alternative version of the menu that includes site search.
For more information on usage, implementation and accessibility, please visit the Menu page.
Example
<div class="bux-menu-wrapper">
<div
class="bux-container bux-grid bux-container__menu bux-container__menu--with-search"
>
<nav
id="bux-main-menu"
aria-label="Main Navigation"
class="disclosure-nav disclosure-nav-orientation-horizontal"
>
<ul class="bux-menu">
<li class="bux-menu__item">
<a
href="#"
class="bux-menu__link bux-menu__link--active disclosure-nav-item-with-submenu disclosure-nav-item-with-submenu"
>Item 1</a
>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a
href="#"
class="bux-menu__link disclosure-nav-item-with-submenu mobile-depth-cutoff"
>
Item 1.1
</a>
<ul
class="disclosure-nav-submenu disclosure-nav-submenu-closed mobile-visible"
>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.1</a>
<ul
class="disclosure-nav-submenu disclosure-nav-submenu-closed"
>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.1</a>
<ul
class="disclosure-nav-submenu disclosure-nav-submenu-closed"
>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.1</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.2</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.2</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.2</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link"> Item 1.2 </a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link"> Item 1.3 </a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link"> Item 1.4 </a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a
href="#"
class="bux-menu__link disclosure-nav-item-with-submenu disclosure-nav-item-with-submenu"
>Item 2</a
>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link"> Item 2.1 </a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link"> Item 2.2 </a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link"> Item 2.3 </a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link"> Item 2.4 </a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 3</a>
</li>
<li class="bux-menu__item">
<a
href="#"
class="bux-menu__link disclosure-nav-item-with-submenu disclosure-nav-item-with-submenu"
>Item 4</a
>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link"> Item 4.1 </a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link"> Item 4.2 </a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link"> Item 4.3 </a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link"> Item 4.4 </a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 5</a>
</li>
</ul>
</nav>
<div class="bux-menu__search">
<div class="bux-form__text-field--menu-search__wrapper">
<form id="site-search" class="bux-search" role="search">
<label class="bux-search__label visually-hidden" for="buxSearch"
>Search</label
>
<input
id="buxSearch"
class="bux-search__input bux-form__text-field bux-from__text-field--menu-search visually-hidden"
placeholder="Search"
tabindex="-1"
title="Search"
/>
<button
class="bux-search__submit visually-hidden"
aria-controls="buxSearch"
tabindex="-1"
>
<span class="visually-hidden">Submit search</span>
</button>
</form>
</div>
<button id="menuSearchBtn" type="button" aria-controls="site-search">
<span class="visually-hidden">Toggle search dialog</span
><span
id="searchIcon"
class="icon icon-search"
aria-hidden="true"
></span>
</button>
</div>
</div>
</div>
{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}
{#
Menu
Available variables:
- modifier: Sets the menu variant. Either null or with-search.
- nav_id: Unique identifier for the menu.
- aria-label: Aria-label for the menu.
- mobileDepthCutoff:Boolean. Set to true to hide deep menu levels on desktop.
- items: Array containing the menu items.
- item.title: Title of the menu item.
- item.url: URL for the menu item.
- item.active: Boolean. True if the item is active.
- item.subitems: Array containing menu subitems.
If using the search variant:
- label: Set to 'with-search'.
- inputId: Unique ID for the search input.
- searchFormId: Unique ID for the search form.
#}
<div class="bux-menu-wrapper">
<div class="bux-container bux-grid bux-container__menu {% if modifier %}bux-container__menu--{{modifier}} {% endif %}">
<nav id="{{ nav_id }}" aria-label="{{ aria_label }}" class="disclosure-nav disclosure-nav-orientation-horizontal">
{% if items %}
<ul class="bux-menu">
{% for item in items %}
<li class="bux-menu__item">
<a href="{{- item.url -}}" class="bux-menu__link{% if item.active %} bux-menu__link--active{% endif %}{% if item.subitems %} disclosure-nav-item-with-submenu{% endif %}{% if item.subitems %} disclosure-nav-item-with-submenu{% endif %}">{{ item.title }}</a>
{% if item.subitems %}
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
{% for subitem1 in item.subitems %}
<li class="bux-menu__item">
<a href="{{- subitem1.url -}}" class="bux-menu__link
{% if subitem1.active %} bux-menu__link--active{% endif %}
{% if subitem1.subitems %} disclosure-nav-item-with-submenu{% endif %}
{% if subitem1.subitems and mobileDepthCutoff %} mobile-depth-cutoff{% endif %}">
{{ subitem1.title }}
</a>
{% if subitem1.subitems %}
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed
{% if mobileDepthCutoff %} mobile-visible{% endif %}">
{% for subitem2 in subitem1.subitems %}
<li class="bux-menu__item">
<a href="{{- subitem2.url -}}" class="bux-menu__link{% if subitem2.active %} bux-menu__link--active{% endif %}">{{ subitem2.title }}</a>
{% if subitem2.subitems %}
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
{% for subitem3 in subitem2.subitems %}
<li class="bux-menu__item">
<a href="{{- subitem3.url -}}" class="bux-menu__link{% if subitem3.active %} bux-menu__link--active{% endif %}">{{ subitem3.title }}</a>
{% if subitem3.subitems %}
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
{% for subitem4 in subitem3.subitems %}
<li class="bux-menu__item">
<a href="{{- subitem4.url -}}" class="bux-menu__link{% if subitem4.active %} bux-menu__link--active{% endif %}">{{ subitem4.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</nav>
{% if label == 'with-search' %}
<div class="bux-menu__search">
<div class="bux-form__text-field--menu-search__wrapper">
<form id="{{ searchFormId }}" class="bux-search" role="search">
<label class="bux-search__label visually-hidden" for="{{ inputId }}">Search</label>
<input id="{{ inputId }}" class="bux-search__input bux-form__text-field bux-from__text-field--menu-search visually-hidden" placeholder="Search" tabindex="-1" title="Search" />
<button class="bux-search__submit visually-hidden" aria-controls="{{ inputId }}" tabindex="-1"><span class="visually-hidden">Submit search</span></button>
</form>
</div>
<button id="menuSearchBtn" type="button" aria-controls="{{ searchFormId }}"><span class="visually-hidden">Toggle search dialog</span><span id="searchIcon" class="icon icon-search" aria-hidden="true"></span></button>
</div>
{% endif %}
</div>
</div>
Implementation Notes
By default, mobileDepthCutoff is set to true, which hides links of a depth
greater than two in the menu tree on large viewports. This is meant to overlap
with the Sidebar Navigation which by default is
hidden on smaller viewports.