Skip to main content

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">Item 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>
<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">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">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>

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.

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>