Navigation Menubar Example

About This Example

Caution!

Before considering use of the Menubar Pattern for site navigation, it is important to understand:

• The menubar pattern requires complex functionality that is unnecessary for typical site navigation that is styled to look like a menubar with expandable sections or fly outs.
• A pattern more suited for typical site navigation with expandable groups of links is the Disclosure Pattern. For an example, see Example Disclosure Navigation Menu.

The following implementation of the Menubar Pattern demonstrates how a menubar can provide navigation menus. The parent menu items in the menubar represent a section of a mythical university web site and open a submenu containing menu items that link to pages within that section. The navigation system it illustrates is comparable to the navigation illustrated in the Example Disclosure Navigation Menu. As noted above, the disclosure pattern is better suited for most web sites because few sites need the additional keyboard functionality required to support the ARIA menubar and menu roles.

Similar examples include:

• Editor Menubar Example: Example of a menubar that presents text styling actions similar to an editor application.
• Example Disclosure Navigation Menu: Navigation menus implemented as simple drop down lists of links that are shown and hidden using disclosure buttons.
• Example Disclosure Navigation Menu with Top-Level Links

Example

Mythical University

Accessibility Features

1. Menu items that trigger navigation move focus to the target page title:

• An important aspect of designing a navigation menu experience is where keyboard focus moves when an item that triggers navigation is activated and the menu closes. If activating a menubar item changes content on the page without triggering a browser page load, i.e., works like typical single-page apps, the focus position after the content load significantly effects efficiency for keyboard and assistive technology users.
• This example behaves like a single page app and activating a menu item that loads new content moves focus to the beginning of the new content, which is a level one heading with content that matches the name of the activated menu item. Focusing on the heading informs screen reader users that navigation is complete and confirms the destination.
• To view other pages, keyboard users need to navigate back to the menubar . To optimize keyboard efficiency, this example locates the menubar immediately before the content display area in the Tab sequence.

2. To help communicate that the arrow keys are available for directional navigation within the menubar and its submenus, a border is added to the menubar container when focus is within the menubar.
3. To help users locate the menu item that loads the currently displayed page, visual indicators of the path to that menu item are added to the menu items in the path:

• The parent menubar item in the path has an extra thick (4 pixel) bottom border.
• If the current page menu item is nested within a deeper submenu, the parent submenu item in the path has an extra thick (4 pixel) left side border.
• Finally, the menu item that loads the currently displayed page is styled with an extra thick border on the left side.

4. To support operating system high contrast settings:

• Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements. Instead of using transparency, the focused element has a thicker border and less padding. When an element receives focus, its border changes from 0 to 2 pixels and padding is reduced by 2 pixels. When an element loses focus, its border changes from 2 to 0 pixels and padding is increased by 2 pixels.
• To ensure the arrow icons used to indicate the expanded or collapsed state have sufficient contrast with the background when high contrast settings invert colors, the CSS currentcolor value for the fill and stroke properties of the SVG polygon element is used to synchronize the color with text content. If specific colors are used to specify the fill and stroke properties, these colors will remain the same in high contrast mode, which could lead to insufficient contrast between the icon and the background or even make the icon invisible if its color matches the high contrast mode background.

5. Since the menubar presents a site navigation system, it is wrapped in a navigation region implemented with a nav element that has an aria-label that matches the label on the menubar.

Keyboard Support

Menubar

• If the item is a parent menu item, opens submenu and moves focus to first item in the submenu.
• Otherwise, activates the menu item, which loads new content and places focus on the heading that titles the content.

| | Right Arrow |

• Moves focus to the next item in the menubar.
• If focus is on the last item, moves focus to the first item.

| | Left Arrow |

• Moves focus to the previous item in the menubar.
• If focus is on the first item, moves focus to the last item.

| | Down Arrow | Opens submenu and moves focus to first item in the submenu. | | Up Arrow | Opens submenu and moves focus to last item in the submenu. | | Home | Moves focus to first item in the menubar. | | End | Moves focus to last item in the menubar. | | Character |

• Moves focus to next item in the menubar having a name that starts with the typed character.
• If none of the items have a name starting with the typed character, focus does not move.

|

Submenu

• If the item is a parent menu item, opens submenu and moves focus to first item in the submenu.
• Otherwise, activates the menu item, which loads new content and places focus on the heading that titles the content.

| | Escape |

• Closes submenu.
• Moves focus to parent menubar item.

| | Right Arrow |

• If focus is on an item with a submenu, opens the submenu and places focus on the first item.
• If focus is on an item that does not have a submenu:
  • Closes submenu.
  • Moves focus to next item in the menubar.
  • Opens submenu of newly focused menubar item, keeping focus on that parent menubar item.

| | Left Arrow |

• Closes submenu and moves focus to parent menu item.
• If parent menu item is in the menubar, also:
  • moves focus to previous item in the menubar.
  • Opens submenu of newly focused menubar item, keeping focus on that parent menubar item.

| | Down Arrow |

• Moves focus to the next item in the submenu.
• If focus is on the last item, moves focus to the first item.

| | Up Arrow |

• Moves focus to previous item in the submenu.
• If focus is on the first item, moves focus to the last item.

| | Home | Moves focus to the first item in the submenu. | | End | Moves focus to the last item in the submenu. | | Character |

• Moves focus to the next item having a name that starts with the typed character.
• If none of the items have a name starting with the typed character, focus does not move.

|

Role, Property, State, and Tabindex Attributes

Landmarks

• Identifies the top section of content that is common across pages in a web site.
• NOTE: The banner role declaration is only necessary because it is an example that is nested inside the content of this page. In an actual website, the header element would be a top level element, i.e., it would have the body as its scope. If the scope of the header element were body, browsers would automatically treat the header as an ARIA banner, so the header would not need role="banner".

| | navigation | | nav | Identifies the region containing the mythical university navigation. | | | aria-label="Mythical University" | nav | Provides an accessible name for the navigation landmark that describes the purpose of the navigation. | | region | | section |

• Identifies the main content region of the page depicted in the example.
• In an actual web page, this region would be identified by a main landmark, but since this page already has a main landmark, role region is used to avoid having two main landmarks on the page.

| | | aria-labelledby="idref" | section | Provides the region with an accessible name from the h1 element. | | contentinfo | | footer |

• Identifies the bottom section of content common across pages in a web site.
• NOTE: The contentinfo role declaration is only necessary because the footer is an example that is nested inside the content of this page. In an actual website, the footer element would be a top level element, i.e., it would have the body as its scope. If the scope of the footer element were body, browsers would automatically treat the footer as a ARIA contentinfo landmark, so the footer would not need role="contentinfo".

|

Menubar

• Identifies the element as a menubar container for a set of menuitem elements.
• The menubar element is not focusable because it implements the practice described in the section on Managing Focus Within Components Using a Roving tabindex.

| | | aria-label="string" | ul |

• Defines an accessible name for the menubar.
• Helps assistive technology users understand the purpose of the menubar and distinguish it from any other menubars or similar elements on the page.

| | menuitem | | a |

• Identifies the element as a menu item.
• The accessible name is calculated from the text content of the a element.

| | | tabindex="-1" | a | Makes the a element keyboard focusable, but not part of the tab sequence. | | | tabindex="0" | a |

• Includes the element in the Tab sequence.
• Only one menubar item has tabindex="0".
• On page load, the first menubar item has tabindex="0".
• Focus is managed using the practice for Managing Focus Within Components Using a Roving tabindex.

| | | aria-current="page" | a |

• Identifies the link URL has the same URL as the web page.
• If the link URL is not the same, the attribute is removed.
• Menu items in the menubar in the path to the current page menu item are given a title attribute with the text content of "Contains current page link" to indicate to screen reader users the menu item contains the current page link.

| | | aria-haspopup="true" | a | Indicates the menuitem has a submenu. | | | aria-expanded="true" | a | Indicates the submenu is open. | | | aria-expanded="false" | a | Indicates the submenu is closed. | | none | | li |

• Removes the implied listitem role of the li element.
• Necessary because the parent ul is serving as a menu so the li elements are not in their required list context.

|

Submenu

• Defines an accessible name for the menu.
• Helps assistive technology users understand the purpose of the menu and distinguish it from any other menu or similar elements (e.g. menubar) on the page.

| | menuitem | | a |

• Identifies the element as a menu item.
• The accessible name is calculated from the text content of the a element.

| | | tabindex="-1" | a | Keeps the a element focusable but removes it from the Tab sequence. | | | aria-haspopup="true" | a | Indicates the menu item has a submenu. | | | aria-expanded="true" | a | Indicates the submenu is open. | | | aria-expanded="false" | a | Indicates the submenu is closed. | | none | | li |

• Removes the implied listitem role of the li element.
• Necessary because the parent ul is serving as a menu so the li elements are not in their required list context.

|

JavaScript and CSS Source Code

• CSS: menubar-navigation.css
• JavaScript: menubar-navigation.js

HTML Source Code

To copy the following HTML code, please open it in CodePen.