Progress Telerik UI for Blazor

Blazor PanelBar

  • 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.
Telerik UI for Blazor Suite
  • Overview

    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. 
    Telerik UI for Blazor PanelBar - Overview
  • PanelBar Configuration

    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.  
    Telerik UI for Blazor PanelBar - Expanded modes
  • Templates

    Use templates to specify how the content of each panel item is displayed. Leverage any combination of Telerik UI for Blazor controls to achieve the desired functionality.  

    Check out the Blazor PanelBar Templates
    PanelBar - Templates
  • Hierarchical and Flat Data

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

    Example of Blazor PanelBar Hierarchical data
    Example of Blazor PanelBar Flat data
    PanelBar - Hierarchical data
  • Events

    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. 

    The UI for Blazor PanelBar Component also exposes OnExpand and OnCollapse events. The two events are invoked when an expandable panel bar item is toggled. Both OnExpand and OnCollapse can receive an event argument called IsCancelled, which allows you to control further the triggering logic and whether to prevent the events from executing, respectively keeping the item's state unchanged.

    Learn more about the PanelBar Events from our documentation

    Telerik UI for Blazor Events
  • 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. 
    Telerik UI for Blazor PanelBar - Theming

All Blazor Components

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.