Navigation Menubar Example

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 Disclosure for Navigation Menus: Navigation menus implemented as simple drop down lists of links that are shown and hidden using disclosure buttons.

Example

Accessibility Features

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.
To support operating system high contrast settings:
- Focus is highlighted by adding and removing a border around the menu item with focus.
- The arrow icons indicating the current state of expandable menus use in-line SVG images with the CSS currentColor value for the fill and stroke properties of the polygon element.
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

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`	If the item is a parent menu item, opens submenu and moves focus to first item in the submenu. Otherwise, activates menu item, which navigates to a dummy page. NOTE: use browser go-back function to return to this 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: menubar-navigation.css
Javascript: menubar-navigation.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