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-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">
<span 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="search-input">Search</label>
<input
id=""
class="bux-search__input bux-form__text-field bux-from__text-field--menu-search visually-hidden"
placeholder="Search"
tabindex="-1"
/>
<button class="bux-search__submit visually-hidden" tabindex="-1">
<span class="visually-hidden">Submit search</span>
</button>
</form>
</span>
<button id="menuSearchBtn" type="button">
<span class="visually-hidden">Toggle search dialog</span
><span id="searchIcon" class="icon icon-search" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
<div class="bux-menu-wrapper">
<div class="bux-container bux-grid bux-container--menu {% if modifier %}bux-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">
<span 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="search-input">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"/>
<button class="bux-search__submit visually-hidden" tabindex="-1">
<span class="visually-hidden">Submit search</span>
</button>
</form>
</span>
<button id="menuSearchBtn" type="button">
<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.