Keyboard Navigation

Managing the Focus

Roving tab index components strategy implemented. Meaning that only one node has tabindex in the menu. Interaction on a menuitem should focus it.

Keyboard Shortcuts

Actions applied to the Horizontal Menu:

Shortcut	Behavior
Up Arrow	(For root items) Opens the item and focuses the last child. (For child items) Focuses the previous item.
Down Arrow	(For root items) Opens the item and focuses the first child. (For child items) Focuses the next item.
Left Arrow	(For root items) Focuses the previous item. (For child items) For direct children of a root item, focuses and opens the previous root item. Otherwise, closes and focuses the parent.
Right Arrow	(For root items) Focuses the next item. (For child items) If the item has children, opens the item and focuses the first child. Otherwise, focuses and opens the next root item.
Home	Focuses the first item.
End	Focuses the last item.
Enter	Selects the focused item. If the item has children, opens the item and focuses the first child. If the item does not have children and has a URL, navigates to the specified URL.
Space	Selects the focused item. If the item has children, opens the item and focuses the first child. If the item does not have children and has a URL, navigates to the specified URL.
Escape	(For child items) Closes and focuses the parent.
Alphanumeric character	Focuses the next item with text starting with the character.

If the Menu is vertical, the arrow keys perform the following actions:

Shortcut	Behavior
Up Arrow	Focuses the previous item.
Down Arrow	Focuses the next item.
Left Arrow	(For root items) opens the item and focuses the last child. (For child items) closes and focuses the parent.
Right Arrow	If the item has children, opens the item and focuses the first child. For child items without children, focuses and opens the next root item.

Resources

ARIA Authoring Practices: Menu Pattern

ARIA Authoring Practices: Developing a Keyboard Interface

Horizontal Menu

Change Theme

Theme

Loading ...

Vertical Menu

Change Theme

Theme

Loading ...

See Also

• Learn about KendoReact Free.

• API Reference of the Menu

• API Reference of the MenuItem

• API Reference of the MenuItemModel

• Accessibility

• Accessibility in KendoReact

• Accessibility Compliance and Keyboard Support in KendoReact