Menu Styling

Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.

There are no definitive rules on how a menu should look like, but a few design patterns have emerged on how and where menus appear on the page, especially for main menus.

While in-text links usually need an underline to help people with low vision or color blindness distinguish them from the surrounding text, this is not needed for links in menus if the menu can be clearly identified as such. If icons or images are used in links, an appropriate alternative text should be provided. See Images Tutorial for more advice.

Vertical Menu

A vertical menu provides space for a lot of links as all items can be easily reached by scrolling the page. Vertical menus are often in small columns on the side of the page which may lead to longer words overlapping the menu bar or get cut off, which is a potential accessibility barrier. This often happens when the user increases the font size, or when the website is translated into other languages.

Example:

Horizontal menu

If a menu has so few items that they can fit in one line on the screen, a horizontal menu bar may be used to display the links. Such menu bars are usually positioned near the top of the page. While this is a compact way to display a menu, horizontal space can be limited if users use small-screen devices or increase the font size. In such cases media queries can help to transform a horizontal into a vertical menu.

Example:

Indicating hover and focus

When the user focuses a menu item or hovers over one using the mouse pointer, the individual menu item should change so users know where the focus is or which menu item is hovered. In the examples in this tutorial, the menu item is inverted and the words are underlined.

Indicating the current page

The current page should be marked to give users a sense of where they are in the site’s structure. This needs to be done in a way that does not rely on color alone. For example in these tutorials an inverted box is used as well as a small arrow to show the entry of the current page. In most cases, the current page item should not be linked to the current page.

In the following example, the active menu item is not only marked using different colors but also by adding a bottom border.

Example:
Code snippet: HTML
<li>
  <span class="current">
    <span class="visuallyhidden">Current Page: </span>
    SpaceBears
  </span>
</li>
Code snippet: CSS
nav .current {
  display: block;
  padding: .25em;
  background-color: #bbb;
  color: #000;
  border-bottom: .25em solid #444;
}

Success Criteria:

  • 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

Techniques: