New to Telerik UI for Blazor? Download Free 30-day trial

ContextMenu - Keyboard Navigation

EXAMPLE
VIEW SOURCE
EDIT IN TELERIK REPL
Change Theme
default

Inbox

Sent

Drafts

Spam

Keyboard-navigation.razor
Loading the demo source code...please wait.

Focus

Alt + W focuses the first component in the example

Supported keys and user actions

Shift + F10 activates the context menu from the context of the current focused element
Esc Closes the popup of the context menu when the focus is in the main context menu. If the focus is in a child item, closes the child item and focuses its parent.
Enter activates the item and closes the context menu. If the current menu item has a submenu (child items), opens the submenu and places the focus on its first item.
Space same as Enter
Home moves focus to the first item in the current menu or sub-menu.
End moves focus to the last item in the current menu or sub-menu.
Down arrow moves focus to the next item in the main menu or a sub-menu, wrapping around the items list. If the last item of the main menu is reached, closes a sub-menu (if present), moves to the first item and expands its sub-menu without focusing it.
Up arrow moves focus to the previous item in the main menu or a sub-menu, wrapping around the items list.
Left arrow opens the sub-menu of an item that has child items and places the focus on the last item of the sub-menu. If the focus is in a sub-menu item, closes the sub-menu and focuses its parent item.
Right arrow opens the sub-menu of an item that has child items and places the focus on the first item of the sub-menu.

Description

Keyboard navigation provides all web and app users with a fast keyboard-only navigation capability and is also part of the web accessibility features - it enables users with disabilities to fully control their website or app access through the keyboard.

By default, users can only navigate to links, buttons, and form controls with a keyboard. The navigation order in which interactive items receive keyboard focus has to be logical and intuitive. Generally, keyboard navigation logic needs to follow the visual horizontal and vertical flow of the page, for example, left to right and top to bottom, header first followed by the main and then the page navigation.

The keyboard navigation of the Telerik UI for Blazor ContextMenu is always enabled, as demonstrated in this demo.

This Blazor ContextMenu Keyboard Navigation example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Keyboard Navigation - Documentation