@progress/kendo-layout-react-wrapper/docs/panelbar/keyboard-navigation.md

Kendo UI Layout wrapper for React

---
title: Keyboard Navigation
page_title: Keyboard Navigation - PanelBar - Kendo UI Wrappers for React
description: "Use the Kendo UI PanelBar keyboard navigation in React projects."
slug: keyboard_navigation_panelbar
position: 5
---

# Keyboard Navigation

By default, the keyboard navigation of the PanelBar is enabled.

The PanelBar supports the following keyboard shortcuts:

| Shortcut           | Description         |
|:---                |:---                 |  
| `Up Arrow`         | Highlights the previous item. If no previous item is available, highlights the last item.
| `Down Arrow`       | Highlights the next item. If no next item is available, highlights the first item.
| `Left Arrow`       | Highlights the previous item.
| `Right Arrow`      | Highlights the previous item.
| `Home`             | Selects the first item from the list.
| `End`              | Selects the last item from the list.
| `Enter` & `Space`  | Selects the highlighted item, or toggles the group of items.

```jsx-preview
class PanelBarContainer extends React.Component {			
  componentDidMount(){          
   $("[data-role='panelbar']").focus();
  }

  render() {
   return (
     <PanelBar>
       <PanelItem className="k-state-active">
          <span className="k-link k-state-selected">My Teammates</span>
          <div>
            <p>Andrew Fuller - Team Lead</p>
            <p>Nancy Leverling - Sales Associate</p>
            <p>Robert King - Business System Analyst</p>
          </div>
        </PanelItem>
        <PanelItem>
           Programs
           <SubItems>
              <PanelItem>Monday</PanelItem>
              <PanelItem>Tuesday</PanelItem>
              <PanelItem>Wednesday</PanelItem>
              <PanelItem>Thursday</PanelItem>
              <PanelItem>Friday</PanelItem>
            </SubItems>
          </PanelItem>
      </PanelBar>
      );
    }
  }

ReactDOM.render(
    <PanelBarContainer/>,
    document.querySelector('my-app')
);
```

## 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)