Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Blazor Toolbar

  • 2 minutes to read

The DevExpress Toolbar component for Blazor (DxToolbar) allows you to implement an adaptive button-based interface in your Blazor application.

Blazor Navigation Landing Toolbar

Run Demo Read Tutorial: Explore Features Watch Video

#Features

#Bound and Unbound Modes

The Toolbar supports bound and unbound modes. Use the Data property to bind the component to flat or hierarchical data. In unbound mode, populate the Items collection manually.

The Toolbar can display a drop-down item list as a standard sub-menu, as a modal dialog, or as a modal bottom sheet. You can specify the drop-down list type explicitly (the DxToolbar.DropDownDisplayMode or DxToolbarItemBase.DropDownDisplayMode property) or allow the component to adapt to the device type.

#Checked Items and Groups

Use the GroupName property to combine items into a logical group that behaves as a group of radio-like buttons. Only one item in a group can be checked at a time.

To add a checked item to the Toolbar, set the item’s GroupName property to a unique value. In this case, every user click changes the item’s state (checked or unchecked).

#Pre-Defined Render Styles

Specify RenderStyle and RenderStyleMode properties to choose one of the pre-defined appearance styles and fillings for toolbar items.

#Adaptivity

When there is not enough space to display all the items, the Toolbar component can adapt its layout: hide text for all items with icons and combine root items in the root submenu. Use AdaptivityAutoCollapseItemsToIcons and AdaptivityAutoHideRootItems properties to enable these features.