Menu
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#
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 notesThe Site Navigation Menu, along with the OSU Navbar and Header should be enclosed by the <header>
element.
#
AccessibilityWhen 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>