Menubar

An accessible menubar navigation in the DOM.

Note

This is a subclass of BaseMenu.

Constructor

Constructs a new Menubar.

new Menubar({
  menuElement,
  menuItemSelector,
  menuLinkSelector,
  submenuItemSelector,
  submenuToggleSelector,
  submenuSelector,
  controllerElement,
  containerElement,
  openClass,
  closeClass,
  transitionClass,
  transitionDuration,
  openDuration,
  closeDuration,
  isTopLevel,
  parentMenu,
  hoverType,
  hoverDelay,
  enterDelay,
  leaveDelay,
  prefix,
  initialize,
});

The constructor will call BaseMenu's constructor with the provided options. It will also initialize the menu if the initialize flag is set to true.

Parameters

Name	Type	Description	Default
options	object	The options for generating the menu.	undefined
options.menuElement	HTMLElement	The menu element in the DOM.	undefined
options.menuItemSelector	string	The query selector string for menu items.	"li"
options.menuLinkSelector	string	The query selector string for menu links.	"a"
options.submenuItemSelector	string	The query selector string for menu items containing submenus.	li:has(ul)
options.submenuToggleSelector	string	The query selector string for submenu toggle buttons/links.	"a"
options.submenuSelector	string	The query selector string for submenus.	"ul"
options.controllerElement	HTMLElement, null	The element controlling the menu in the DOM.	null
options.containerElement	HTMLElement, null	The element containing the menu in the DOM.	null
options.openClass	string, string[], null	The class to apply when a menu is "open".	"show"
options.closeClass	string, string[], null	The class to apply when a menu is "closed".	"hide"
options.transitionClass	string, string[], null	The class to apply when a menu is transitioning between "open" and "closed" states.	"transitioning"
options.transitionDuration	number	The duration of the transition between "open" and "closed" states (in milliseconds).	250
options.openDuration	number	The duration of the transition from "closed" to "open" states (in milliseconds).	250
options.closeDuration	number	The duration of the transition from "open" to "closed" states (in milliseconds).	250
options.isTopLevel	boolean	A flag to mark the root menu.	true
options.parentMenu	Menubar, null	The parent menu to this menu.	null
options.hoverType	string	The type of hoverability a menu has.	"off"
options.hoverDelay	number	The delay for opening and closing menus if the menu is hoverable (in milliseconds).	250
options.enterDelay	number	The delay for opening a menu if the menu is focusable (in milliseconds).	-1
options.leaveDelay	number	The delay for closing a menu if the menu is focusable (in milliseconds).	-1
options.prefix	string, null	The prefix for the CSS custom properties.	"am-"
options.initialize	boolean	A flag to initialize the menu immediately upon creation.	true

Initialize

Initializes the menu.

Menubar.initialize();

Initialize will call BaseMenu's initialize method as well as set up focus (inherited), click, hover (inherited), keydown, and keyup events for the menu.

This will also set the menu's role to "menubar" in the DOM.

If the menu is a root menu the first menu item's tabIndex will be set to 0 in the DOM.

If the BaseMenu's initialize method throws an error, this will catch it and log it to the console.

Properties

Properties are inherited from the BaseMenu class. The following properties are unique to or overwritten in the Menubar class.

_MenuType protected

The class to use when generating submenus.

Menubar._MenuType; // Default: `Menubar`.

Type

Class

_MenuItemType protected

The class to use when generating menu items.

Menubar._MenuItemType; // Default: `MenubarItem`.

Type

Class

_MenuToggleType protected

The class to use when generating menu toggles.

Menubar._MenuToggleType; // Default: `MenubarToggle`.

Type

Class

Getters and Setters

Getters and setters are inherited from the BaseMenu class. The following getters and setters are unique to or overwritten in the Menubar class.

Methods

Methods are inherited from the BaseMenu class. The following methods are unique to or overwritten in the Menubar class.

_handleClick protected

Handles click events throughout the menu for proper use.

Menubar._handleClick();

This method will do the following:

• Adds all event listeners listed in BaseMenu's _handleClick method.
• Adds a pointerup listener to the document so if the user clicks outside of the menu it will close if it is open.

_handleKeydown protected

Handles keydown events throughout the menu for proper menu use.

Menubar._handleKeydown();

This method exists to assist the _handleKeyup method.

This method will do the following:

• Adds all keydown listeners from BaseMenu's _handleKeydown method.
• Adds a keydown listener to the menu/all submenus.
  • Blocks propagation on the following keys: "ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft", "Home", "End", "Space", "Enter", "Escape", and "A" through "Z".
  • Completely closes the menu and moves focus out if the "Tab" key is pressed.

_handleKeyup protected

Handles keyup events throughout the menu for proper menu use.

Menubar._handleKeyup();

Adds all keyup listeners from BaseMenu's _handleKeyup method.

Adds the following keybindings (explanations are taken from the Navigation Menubar Example:

Menubar

Key	Function
Space or 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 or Enter	Activates menu item, causing the link to be activated. NOTE: the links go to dummy pages; use the browser go-back function to return to this menubar example 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.

focusNextChild public

Focus the menu's next child.

Menubar.focusNextChild();

If the currently focussed child in the menu is the last child then this will focus the first child in the menu.

focusPreviousChild public

Focus the menu's previous child.

Menubar.focusPreviousChild();

If the currently focussed child in the menu is the first child then this will focus the last child in the menu.

focusNextChildWithCharacter public

Focus the menu's next child starting with a specific letter.

Menubar.focusNextChildWithCharacter(char);

Parameters

Name	Type	Description	Default
char	string	The character to look for.	undefined