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.
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.
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.
The React PanelBar component comes with a wide variety of eye catching and slick animations. These result in more fluent transitions between sections.
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.
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.
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.
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.