Menu bar

Overview

Project lead: Paul Jackson (@pjackson28)

Purpose

Primary site navigation implemented as links in a horizontal menu bar. The menu bar facilitates persistent access to the primary navigation of a website regardless of where they are on the site.

Benefits

  • Includes support for mega menus
  • Conforms to WCAG 2.0 AA
  • Uses WAI-ARIA to enhance accessibility
  • Progressive enhancement approach
  • Primary website navigation can show users the breadth of information or services available on the site.
  • Persistent (that is, ever-present) navigation items help users understand the full scope of the site and facilitates movement among sections.
  • Users will not necessarily come to the home page when they first visit a site (for example, when they follow a link from a search engine results page). A user’s first visit may be to a page deep within the site. For this reason, persistent navigation that always shows what is available on the site can help orient users.
  • A horizontal menu is practical for persistent navigation elements, because it takes up very little space that could otherwise be used for site content.

Recommended usage

Primary navigation for a website that appears on every page of a website.

Use When

This menu must be used on Government of Canada websites.

Appearance

The horizontal site navigation bar appears as a single row of items above the site content. The text links used in the horizontal site navigation bar cannot wrap to two lines.

On the home page, every item in the navigation bar has the same appearance. Items that expand to show secondary navigation options have an upside-down triangle indicating that a menu will be previewed from that item on hover. On hover, text links are underlined and the background colour changes.

On pages other than the home page, the item selected is visually indicated by the background colour.

Read the technical specifications for the horizontal site navigation bar prescribed by the Federal Identity Program.

Content

The horizontal site navigation bar items describe the scope of what is available on the site. The horizontal bar can accommodate between three and twelve items, depending on the length of the text of each item. Menu items should have short, clear labels that effectively convey the scope of what is available in that section.

Designing an effective Information Architecture (IA) is critical to implementing effective navigation menus. Information organization exercises such as card sorting can help in choosing and verifying labels for the sections of a site. These exercises should be carried out in both official languages - the term that describes a section in one language may not be a direct translation of the term used in the other language. Usability testing should be done on proposed labels and Information Architecture before implementing them on your site. Testing should include various platforms and devices, including mobile devices and touchscreen interfaces.

Unlike vertical navigation, horizontal navigation must be visible to users in its entirety at all times (since users will not expect to have to scroll to the right). Unlike vertical navigation, horizontal navigation cannot be easily expanded if more menu items are needed. For that reason, choose carefully what items should appear in the menu.

Plan both official language versions of the horizontal site navigation bar at the same time, to avoid issues with longer-than-expected translations.

All menu elements should link within the site. The horizontal menu bar should not contain links that are not part of the current site.

References

  • Gube, Jacon. Module Tabs in Web Design: Best Practices and Solutions. Smashing Magazine, June 24, 2009. Mon. 21 Nov. 2011.
  • Lazaris, Louis. The Case Against Vertical Navigation. Smashing Magazine, Jan. 11, 2010. Mon. 21 Nov. 2011.
  • Horizontal Navigation Menus: Trends, Patterns and Best Practices. Smashing Magazine, Sept. 7, 2009. Mon. 21 Nov. 2011.
  • Outing, Steve and Laura Ruel. The Best Eyetrack III: What We Saw When We Looked Through Their Eyes. Eyetrack !!!, 2004. Mon. 21 Nov. 2011.
  • Ross, Tom. Tabbed Navigation — How To Do It Right. PSDFan.com, Oct. 13, 2010. Mon. 21 Nov. 2011.
  • van Welie, Martijn. Double Tab Navigation. Welie.com, 2008. Mon. 21 Nov. 2011.
  • Main Navigation. Welie.com, 2008. Mon. 21 Nov. 2011.
  • Wroblewski, Luke. The History of Amazon’s Tab Navigation. Lukew.com, May 7, 2005. Mon. 21 Nov. 2011.
  • Yahoo! Inc. Navigation Tabs. Yahoo! Developer Network, July 15, 2009. Mon. 21 Nov. 2011.

Implementation

  1. Create a div element with the wet-boew-menubar class
  2. Optional: If creating mega menus add the mb-mega class to the div created earlier. Note: Mega menus can support a maximum of three levels (e.g., heading, list and nested list).
  3. Optional: If a link to the top level page is required, then add the following to the end of the mega menu: 
    <div class="mb-main-link"><a href="#">Section 3 - Main page</a></div>

Examples

Development

Menu bar is dependent upon the following 3rd party plugins:

The code for the menu bar is located in several places within the source folder of WET:

Known Issues

  • There are no known technical issues at this point in time.
  • Menu structures should be usability tested before they are implemented. Techniques such as card sorting can help create usable menus.

Future

  • Using native HTML5 elements where possible
  • Refining the mobile view

Version History

Related Documentation