Skip to main content
All docs
V24.1

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.