Navigation Menubar Example

NOTE: Please provide feedback on this example in issue 410.

The following implementation of the design pattern for menubar demonstrates a menubar that provides site navigation menus. Each item in the menubar represents a section of a web site for a mythical university and opens a submenu containing menu items that link to pages within that section.

Similar examples include:

Editor Menubar Example: Example of a menubar that presents text styling actions similar to an editor application.

Example

Accessibility Features

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.
The down arrow and right arrow icons are made compatible with high contrast mode and hidden from screen readers by using the CSS content property to render images.

Keyboard Support

Menubar

Key	Function
`Space` `Enter`	Opens submenu and moves focus to first item in the submenu.
`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

Key	Function
`Space` `Enter`	Activates menu item, causing the link to be activated. NOTE: the links go to dummy pages; use the browser go-back function to return to this menubar example page.
`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

Menubar

Role	Attribute	Element	Usage
`menubar`		`ul`	Identifies the element as a `menubar` container for a set of `menuitem` elements. Is not focusable because focus is managed using 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 roving tabindex.
	`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

Role	Attribute	Element	Usage
`menu`		`ul`	Identifies the element as a menu container for a set of menu items.
	`aria-label="string"`	`ul`	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: menubarLinks.css
Javascript: MenubarItemLinks.js
Javascript: MenubarLinks.js
Javascript: PopupMenuItemLinks.js
Javascript: PopupMenuLinks.js

Navigation Menubar Example

Example

Accessibility Features

Keyboard Support

Menubar

Submenu

Role, Property, State, and Tabindex Attributes

Menubar

Submenu

Javascript and CSS Source Code

HTML Source Code