React PanelBar

Overview

The KendoReact PanelBar is a great choice when we must show hierarchical expandable data. The React component can be used as a nice side navigation, as it has many customization options, easy integration with react-router and beautiful animations.

See React PanelBar Overview demo

React PanelBar - Overview, KendoReact UI Library

Data Binding

The KendoReact PanelBar items can be set declaratively or bound to JSON list of items that can be locally stored or requested from the server. These options provide great flexibility to setup the items dynamically based on other changes inside the application.

See React PanelBar Data Binding demo

Expand Modes

The component provides two built-in expand modes, allowing the user to expand multiple elements at once, or only one. The “multiple” mode enables users to see a large portion of the item structures at once, where the “single” mode focuses the user on the current section, keeping the section more compact.

See React PanelBar Expand Modes demo

React PanelBar - Expand Modes, KendoReact UI Library

Animations

The React PanelBar component comes with a wide variety of eye catching and slick animations. These result in more fluent transitions between sections.

See React PanelBar Animations demo

React PanelBar - Animations, KendoReact UI Library

Routing

The component comes with react-router integration and can be utilized to create functional and beautiful side navigation. The hierarchical nature of the component makes it perfect to route to any nested page in the application.

See React PanelBar Routing demo

Controlled and Uncontrolled Modes

In “controlled” mode, the KendoReact PanelBar component provides the ability to control its selection and expanded state of items to allow dynamic changes based on the application state. The “uncontrolled” mode of the component handles all user interactions internally and makes all necessary updates automatically.

See React PanelBar Controlled and Uncontrolled Modes demo

Keyboard Navigation

The React component can be utilized fully with the keyboard. This provides fast and intuitive interactions with the component by using all built-in key commands.

See React PanelBar Keyboard Navigation demo

Accessibility

We add all necessary WAI-ARIA attributes to the component when an item is selected or expanded to make the React PanelBar fully accessible and WCAG 2.0 compliant.

See React PanelBar Accessibility demo

React PanelBar - Accessibility, KendoReact UI Library

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.