background

KendoReact

React PanelBar

  • Enjoy this React PanelBar's many customization options, easy integration with react-router and beautiful animations.
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Panel Bar Header
  • Group Content in Completely Customizable and Collapsible Panes

    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 the 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 the 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 the 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 the 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 the React PanelBar Routing demo

  • Controlled and Uncontrolled Modes

    In a 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 the React PanelBar Controlled Mode 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 the 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 the React PanelBar Accessibility demo

    Accessibility

All KendoReact Components

Next Steps