Use the Blazor PanelBar component when you need to display data in collapsible panels, letting the user expand only what is necessary.
This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
The Telerik UI for Blazor PanelBar component combines a vertical bar, containing multiple panels with support for hierarchical data. Each panel can be expanded separately or together with others. The displayed data can be arbitrary—display anything from plain text to images and other Telerik UI for Blazor controls.
The component enables you to toggle between two modes: single (only one panel can be expanded at a time) and multiple (many panels can be expanded). Each of the panels can be additionally marked as disabled to prevent users from expanding it.
The component works with both hierarchical and flat data. You can display simple linear structures such as a list of all employees in a company or complex hierarchical structures such as a complete organizational chart (e.g. all company employees, listed under their direct managers).
Subscribe to the OnItemClick event to get notified when any component element (a panel or a panel item) is clicked. Subscribe to ExpandedItemsChanged to react when a certain panel is expanded. Subscribe to OnItemRender to know when an item is rendered so you can set a class to it.
Accessibility and Keyboard Navigation
The component can be navigated through a set of keyboard shortcuts: the Up and Down arrows control the currently selected item, the Right and Left arrows expand and collapse it, Home and End jump to the first and last items respectively and Enter expands the current panel or executes the current action (e.g., opens a link).
Blazor PanelBar Theming
The color scheme of the Telerik UI for Blazor PanelBar is entirely controlled by your active theme. You can easily modify the colors of the PanelBar with only a few lines of code.