Navigation Menubar Example
NOTE: Please provide feedback on this example in issue 410.
The following two implementations of the design pattern for menubar demonstrate a menubar that presents site navigation menus. Each item in the menubars 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. The two examples are functionally equivalent but differ in how they are coded; see notes that follow each example.
Similar examples include:
- Editor Menubar Example: Example of a menubar that presents text styling actions similar to an editor application.
Examples
Example 1: Menubar With ARIA Markup in the HTML Source
Notes
This implementation includes the ARIA roles and properties in the HTML to make it easy to see how they are used.
Example 2: ARIA markup added dynamically
Notes
- In this implementation, ARIA roles and properties are added by the scripts based on the HTML structure.
- This approach may be helpful when applying the menubar pattern to existing content.
Accessibility Features
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 |
|
Left Arrow |
|
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 |
|
Submenu
Key | Function |
---|---|
Space Enter |
|
Escape |
|
Right Arrow |
|
Left Arrow |
|
Down Arrow |
|
Up Arrow |
|
Home | Moves focus to the first item in the submenu. |
End | Moves focus to the last item in the submenu. |
Character |
|
Role, Property, State, and Tabindex Attributes
Menubar
Role | Attribute | Element | Usage |
---|---|---|---|
menubar
|
ul
|
|
|
aria-label="string"
|
ul
|
|
|
menuitem
|
a
|
|
|
tabindex="-1"
|
a
|
Makes the a element keyboard focusable, but not part of the tab sequence.
|
|
tabindex="0"
|
a
|
|
|
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
|
|
Submenu
Role | Attribute | Element | Usage |
---|---|---|---|
menu
|
ul
|
Identifies the element as a menu container for a set of menu items. | |
aria-label="string"
|
ul
|
|
|
menuitem
|
a
|
|
|
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
|
|
Javascript and CSS Source Code
- CSS: menubarLinks.css
- Javascript: MenubarItemLinks.js
- Javascript: MenubarLinks.js
- Javascript: PopupMenuItemLinks.js
- Javascript: PopupMenuLinks.js
HTML Source Code
Example 1: Menubar With ARIA Markup in the HTML Source
Example 2: ARIA markup added dynamically