Blazor ToolBar - Overview

  • Overview.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
blazor ui ninja image

The ToolBar component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.


The Telerik UI for Blazor ToolBar is a container that organizes buttons and button groups into a toolbar. It supports templates for complete customization and provides spacers and separators to better organize the inner components.

The Blazor Toolbar includes these built-in tools:

  • ToolbarButton: A button with just text, and icon or both.
  • ToolbarToggleButton: A button with two states: normal and selected.
  • ToolbarButtonGroup: Group together multiple buttons with a related purpose. When you add multiple groups to the toolbar, it will space them sensibly.

The Blazor ToolBar will automatically lay out and space your button groups. Its elements include:

  • ToolBarSeparator: Adds a line between two items. Various settings help you customize its responsive behavior.
  • ToolBarSpacer: Adds empty space around toolbar items.

You can use templates to add your own items to the Blazor ToolBar. Many developers like to add the Blazor DropDownList Blazor DropDownList to help users select values.

The Blazor ToolBar example above imagines a custom email client. The first few items use the built-in ToolBarButton. The last item (Move to) shows you how to use the ToolBarTemplate to add a Blazor DropDown to your toolbar.

Feel free to open this demo in the Blazor REPL (described below) and add items such as ToolBarGroups, ToolBarSpacers and ToolBarSeparators to see how easy it really is.

This Blazor ToolBar Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.