type: widget

release: ?

status: in development on ice

documentation: n/a

demo: http://view.jqueryui.com/menubar/demos/menubar/default.html

TODOs:

Rename "menuElement" option to "menus" to match naming in Menu
Rename icons.menu to icons.dropdown
Make the managed focus sticky: When focus returns to a menubar, the last focussed item gets focussed again.

See also keyboard/focus handling for tab/shift-tab below.

Disable items/menus with class="ui-state-disabled"
Add refresh method

See method description below

Revert the menu modifications and remove the popup widget from the branch (or completely)
Add a demo ala Wordpress admin menubar: http://bassistance.de/i/40afad.png

1 - Description:

A horizontal menu with nested vertical flyout menus for each menu item. Wraps the menu widget (which has a lot more links to existing plugins and other references).

A relevant reference is the whatwg html spec on menus.

Accessible Mootools has a DropMenu that's an equivalent of the menubar.

2 - Visual Design:

See E2:

3 - Functional Specifications/Requirements:

Options:

items (Selector, default: "li" )

Which elements to use as top-level items inside the menubar

menus (Selector, default: "ul" )

Which elements to use as nested menus under the top-level items. Will also be forwarded to Menu's menus option.

icons (Object, default: { dropdown: "ui-icon-triangle-1-s" } )

Has a single property "dropdown". This class gets added to any top-level item that have a submenu.
Set the menu property to something else for custom icons, or set the icons option to null to disable icons.

position (Object, default: { my: "left top", at: "left bottom" } )

Where to position the dropdown menus.

Methods:

refresh

Equivalent to Menu's and other widgets refresh method
When new elements are added to the menubar element, calling refresh will add the right classes and event handlers to those element. This also takes care of cleaning up when elements are removed, if necessary.

Events:

select

Same select event as the one in Menu.

Keyboard/focus handling:

Cursor left/right: If no menu is open, focus just moves from one top-level item to the next. If there's a menu open, cursor right might open the active's menu submenu, while cursor left would close it. If a menu is open and the next item has a menu, moving to that item opens the next item's menu. When the next item doesn't have a menu, the previous menu is closed. When then moving to another item with a menu, that menu opens.
Cursor up/down: If the active item has a menu, that menu is opened. If its already open, focus is moved within the menu.
Escape: Closes the active menu, if there is one.
Tab/Shift-Tab: Moves focus to the next or previous focusable element. Must be outside the menubar. To move focus within the menubar, use the other keys as described. When moving focus back to the menubar, the item that had the (managed) focus last will receive it again.

Not supported:

The menubar doesn't support a vertical display, since ARIA requires menubars to be horizontal. The equivalent of a vertical, hover-activated menubar can be achieved by just using an inline Menu.

4 - Markup & Style:

4.1 Initial markup examples

Any unordered list:

<ul>

<li><a href="/http://google.com">Google</a></li>

<li><a href="/http://yahoo.com">Yahoo</a></li>

</ul>

For nested menus, nested unordered lists:

<ul>

<li><a href="/http://google.com">Google</a></li>

<li><a href="/http://yahoo.com">Yahoo</a></li>

<ul>

<li><a href="/htp://sub1.example.com">sub-level</a></li>

<li><a href="/http://sub2.example.com">sub-level</a></li>

</ul>

</li>

</ul>

4.2 Recommended transformed HTML markup

TODO

4.3 Accessibility recommendations

ARIA markup:

Use the following roles:

role="menubar" for menubar <ul>

role="menu" for submenu <ul> elements
role="menuitem" for (sub)menu items *

role="menuitemradio" and role="menuitemcheckox" for checkable menu items

Role="presentation" for menuitem containers that are not needed in the exposed accessible menubar structure*

Use the following states:

aria-expanded="true/false" for branch menu items
aria-hidden="true/false" for submenus
aria-activedescendant="<id of active menuitem>" to track focus
aria-labelledby="<id of parent menu item>"

* Support for ARIA menubars by screen readers such as JAWS is erratic at best, specifically in internet explorer. It seems support is more consistent when placing the role="menuitem" element adjacent to its submenu, as opposed to nesting the submenu inside the menuitem element (which is what regular nested html lists do). Because of this it's recommended to set role="presentation" on the <li> element and role="menuitem" on the <a> element inside of it.

To associate submenus with their parent menu(bar) items we need an aria-labelledby attribute on the submenu elements that point to the ID of the parent menu item. The downside is that you would have set ID values on those menu items, which would also conflict with the ID value bring added and removed by the menubar's aria-activedescendant attribute. An easier solution would be to use the aria-label attribute, which just takes the submenu's accessible name as a string. The downside there is that IE does not support this attribute yet. The other option is to add the submenu's name as a title attribute, which works on all browsers and does not requires IDs. But of course the downside there is that you get unwanted tooltips as a side effect.

Keyboard navigation

In general the menubar needs to behave like in a desktop environment. It should be possible to use the left and right arrow keys to open the adjacent sub menu in the bar. It should also be possible to navigate the menubar items sideways without automatically expanding their sub menus (unless the current menubar item was already expanded).

Optionally, there could be a shortcut to move focus to the menu from any point in the web application. Selecting an item in the menubar should ten attempt to move focus back to where it was when the menubar shortcut was triggered

High contrast support

The sub menu indicators as well as checkable indicators must be visible in high contrast mode.

Menubar

1 - Description:

2 - Visual Design:

3 - Functional Specifications/Requirements:

4 - Markup & Style:

4.2 Recommended transformed HTML markup

4.3 Accessibility recommendations

4.4 CSS & Theme

5 - Latest version of plugin:

6 - Open issues being discussed