---
title: Keyboard Navigation
page_title: Keyboard Navigation - PanelBar - Kendo UI for Vue
description: "Explore the keyboard navigation options provided by the Kendo UI PanelBar wrapper for Vue."
slug: keyboard_navigation_panelbar_wrapper
canonicalLink: "https://www.telerik.com/kendo-vue-ui/components/layout/panelbar/keyboard-navigation/"
position: 9
---

<div><WrapperBanner link="/kendo-vue-ui/components/layout/panelbar/keyboard-navigation"></WrapperBanner></div> 

# Keyboard Navigation

The keyboard navigation of the PanelBar is always available.

To focus the PanelBar, either:
* Click in the example area and press the `Tab` key, or
* Use `Alt`+`w`.

The PanelBar supports the following keyboard shortcuts:

| SHORTCUT    | DESCRIPTION |
|:---         |:--- |
| `Up Arrow`  | Highlights the previous item.|
| `Left Arrow`  | Highlights the previous item.|
| `Down Arrow`  | Highlights the next item.|
| `Right Arrow` | Highlights the next item.|
| `Home`      | Selects the first item in the list.|
| `End`       | Selects the last item in the list.|
| `Enter`     | <ul><li>Selects the highlighted item.</li> <li>Toggles the item group.</li></ul> |
| `Space`     | <ul><li>Selects the highlighted item.</li> <li>Toggles the item group.</li></ul> |

{% meta height:450 %}
{% embed_file panelbar/keyboard/main.vue preview %}
{% embed_file panelbar/keyboard/main.js %}
{% endmeta %}

## Suggested Links

* [Kendo UI PanelBar for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/panelbar/overview)
* [API Reference of the PanelBar Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar)