Editor Menubar Example
NOTE: Please provide feedback on this example in issue 144.
The following example demonstrates using the
menubar design pattern
to provide access to sets of actions.
Each item in this example menubar represents a category of text
formatting commands. The formatting commands are revealed in popup menus that can be opened from
items in the menubar. This example also demonstrates menuitemradio
and menuitemcheckbox
elements.
Similar examples include:
- Navigation Menubar Example: Example of a menubar with popup menus with navigational links.
Example
Notes
- Menu radio buttons and checkboxes indicate the current format settings.
- Disabled menu items are demonstrated in the font size menu, which includes two disabled menuitems .
Keyboard Support
Menubar
Key | Function |
---|---|
Space or Enter | Opens popup menu and places focus on the first item in the popup. |
Right Arrow |
|
Left Arrow |
|
Down Arrow | Opens popup menu and places focus on the first item in the popup. |
Up Arrow | Opens popup menu and places focus on the last item in the popup. |
Home | Moves focus to first item in the menubar. |
End | Moves focus to last item in the menubar. |
Character |
|
Popup
Key | Function |
---|---|
Space or Enter | Executes action or command, e.g., bolds text, change font. |
Escape |
|
Right Arrow |
|
Left Arrow |
|
Down Arrow |
|
Up Arrow |
|
Home | Moves focus to the first item in the popup. |
End | Moves focus to the last item in the popup. |
Character |
|
Role, Property, State, and Tabindex Attributes
Menubar
Role | Attribute | Element | Usage |
---|---|---|---|
menubar
|
ul
|
|
|
aria-label="string"
|
ul
|
|
|
menuitem
|
li
|
Identifies the li element as a menu item within the menubar widget.
|
|
aria-label="string"
|
li
|
|
|
tabindex="-1"
|
li
|
Makes the menuitem element keyboard focusable but
not part of the Tab sequence of the page.
|
|
tabindex="0"
|
li
|
|
|
aria-haspopup="true"
|
li
|
Identifies the menuitem as having a child popup menu.
|
|
aria-expanded="true"
|
li
|
Indicates the child popup menu is open. | |
aria-expanded="false"
|
li
|
Indicates the child popup menu is closed. |
Popup Menu
Role | Attribute | Element | Usage |
---|---|---|---|
menu
|
ul
|
|
|
aria-label="string"
|
ul
|
Defines an acessible name for the menu .
|
|
menuitem
|
li
|
Identifies the li element as a menu item in the popup menu.
|
|
tabindex="-1"
|
li
|
Makes the item focusable but not part of the page tab sequence. | |
menuitemcheckbox
|
li
|
Identifies the li element as a menuitemcheckbox widget.
|
|
tabindex="-1"
|
li
|
Makes the menuitemcheckbox focusable but not part of the page tab sequence. | |
aria-checked="true"
|
li
|
|
|
aria-checked="false"
|
li
|
|
|
group
|
ul
|
|
|
menuitemradio
|
li
|
|
|
tabindex="-1"
|
li
|
Makes the menuitemradio focusable but not part of the page tab sequence. | |
aria-checked="true"
|
li
|
|
|
aria-checked="false"
|
li
|
|
Javascript and CSS Source Code
- CSS: menubarAction.css
- Javascript: MenubarAction.js
- Javascript: MenubarItemAction.js
- Javascript: PopupMenuAction.js
- Javascript: MenuItemAction.js
- Javascript: TextStyling.js