Vue Layout Library & Menu - Keyboard Navigation - Kendo UI for Vue Docs & Demos

Introduction
Getting Started
Vue 2 End of Support
Vue Wrappers End of Life
Native Components
- Animation
- Buttons
- Chartsupdated
- Conversational UI
- Data Query
- Data Tools
- Date Inputs
- Date Math
- Dialogs
- Drawing
- Dropdowns
- Editor
- Excel Export
- File Saver
- Form
- Gauges
- Gridupdated
- Icons
- Indicators
- Inputsupdated
- Labels
- Layout
- - Overview
  - Getting Started
  - ActionSheet
  - AppBar
  - Avatar
  - BottomNavigation
  - Card
  - ContextMenu
  - Drawer
  - ExpansionPanel
  - GridLayout
  - Menu
  - - Overview
    - Data Binding
    - Items
    - Vertical Menu
    - Opening and Closing
    - Routing
    - Localization
    - Keyboard Navigation
    - Events
    - Accessibility
  - PanelBar
  - Splitter
  - StackLayout
  - Stepper
  - TabStrip
  - TileLayout
  - Wizard
  - Globalization
  - API
- ListBox
- ListView
- Notification
- PDF Processing
- Popup
- Progress Bars
- Scheduler
- ScrollView
- Tooltip
- TreeList
- TreeView
- Upload
Wrapper Components
Sample Applications
Styling & Themes
Common Features
Project Setup
Knowledge Base
Changelog
FAQ
Troubleshooting

Components / Layout / Menu / Keyboard Navigation /

New to Kendo UI for Vue? Start a free 30-day trial

The keyboard navigation of the Menu is always available.

The Menu supports the following keyboard shortcuts:

SHORTCUT	DESCRIPTION
`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, opens the previous root item and focuses its first child. 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, opens the next root item and focuses its first child.
`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.

Example

View Source

Change Theme:

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

SHORTCUT	DESCRIPTION
`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, opens the next root item and focuses its first child.

Example

View Source

Change Theme:

Suggested Links