Menu with Search
JSThis component requires JavaScript.
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 bux-menu__link--active 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 bux-menu__link--active"
>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.1.2
Copyright (C) 2025 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.