Menu

JSThis component requires JavaScript.

Component status:Ready

A menu helps the user navigate to main sections of the website.

Most websites require a menu – a form of navigation to help users find the information they need. While a horizontal menu is just one option for navigation, it is one of the most visible and familiar ways of helping users navigate a website.

Consider the default menu for a website that has little content, and therefore, shallow hierarchy.

Consider a dropdown menu for websites with a moderate amount of content in order to help users quickly preview lower-level content.

Consider a sidebar menu in addition to the default menu if lower-level sections are closely related and users will need to quickly jump between them.

Example

<div class="bux-menu-wrapper">
  <div class="bux-container bux-grid bux-container__menu">
    <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>
</div>

{#
Buckeye UX - version 1.0.15
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>

Usage

Dos

• Use short, clear link text
• Use 8 or less “Level 1” links
• Keep the menu consistent among pages
• If possible, conduct usability tests and review analytics to confirm your site’s information architecture is meeting your audiences’ needs

Don’ts

• Don't use if there is a large amount of content and/or lower-level sections are closely related and users will need to quickly jump between them; consider Sidebar Navigation in addition to the default menu

Implementation notes

The Site Navigation Menu, along with the OSU Navbar and Header should be enclosed by the <header> element.

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.

Accessibility

When the current page is one of the link items in the navigation, that link should have the attribute-value pair aria-current="page" added to the <a> element.

Example:

This code snippet is of a submenu where the browser is on page 2.3.html.

<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" aria-current="page">Item 2.3</a>
  </li>
  <li class="bux-menu__item">
    <a href="#" class="bux-menu__link">Item 2.4</a>
  </li>
</ul>

• Example Disclosure Navigation Menu
• Link + Disclosure Widget Navigation