Navigation Menubar Example
NOTE: Please provide feedback on this example in issue 145.
Following are two implementations of the design pattern for menubar that demonstrate how a menubar can be used for site navigation. Each item in the two menubars represents a section of a web site for a mythical university and opens a pull down menu with links to pages within that section. The two examples differ only in how they are coded; see notes that follow each example.
Similar examples include:
- Editor Menubar Example: Example of a menubar with text styling actions similar to an editor application.
Examples
Example 1: Menubar With ARIA Markup in the HTML Source
Notes
- This example includes the ARIA roles and properties in the source code for authors to easily see which elements the roles and properties need to be included.
- This is useful for people writing their own scripts to see which elements need roles and properties.
Example 2: ARIA markup added dynamically
Notes
- This example includes the ARIA roles and properties are added by the scripts based on the structure of the HTML elements.
- This can be used by authors to more easily add this script to their own projects and websites.
Keyboard Support
Menubar
Key | Function |
---|---|
Space or Enter |
|
Left Arrow |
|
Right Arrow |
|
Down Arrow |
|
Up Arrow |
|
Home |
|
End |
|
Character |
|
Popup Menu
Key | Function |
---|---|
Space or Enter |
|
Escape |
|
Left Arrow |
|
Right Arrow |
|
Up Arrow |
|
Down Arrow |
|
Home |
|
End |
|
Character |
|
Role, Property, State, and Tabindex Attributes
Menubar
Role | Attribute | Element | Usage |
---|---|---|---|
menubar
|
ul
|
|
|
aria-label="string"
|
ul
|
|
|
menuitem
|
a
|
|
|
tabindex="-1"
|
a
|
|
|
tabindex="0"
|
a
|
|
|
aria-haspopup="true"
|
a
|
|
|
aria-expanded="true"
|
a
|
|
|
aria-expanded="false"
|
a
|
|
|
none
|
li
|
|
Popup Menu
Role | Attribute | Element | Usage |
---|---|---|---|
menu
|
ul
|
|
|
aria-label="string"
|
ul
|
|
|
menuitem
|
a
|
|
|
tabindex="-1"
|
a
|
|
|
aria-haspopup="true"
|
a
|
|
|
aria-expanded="true"
|
a
|
|
|
aria-expanded="false"
|
a
|
|
|
none
|
li
|
|
Javascript and CSS Source Code
- CSS: menubarLinks.css
- Javascript: MenubarItemLinks.js
- Javascript: MenubarLinks.js
- Javascript: PopupMenuItemLinks.js
- Javascript: PopupMenuLinks.js