The Toolbar component allows you to implement an adaptive button-based interface within your Blazor application. Toolbar buttons are stored in the Items collection, and each button is defined by a DxToolbarItem object (which can display an icon, text or both).

Key Toolbar API members are as follows:

• Click — Fires when users click the toolbar item. Handle this event to specify different click handlers for different items. To specify a common click handler for all toolbar items, use the Toolbar's ItemClick event.
• Text — Specifies item text.
• BeginGroup — Set to true to create a new item group.
• IconCssClass — Specifies the name of the CSS class applied to a toolbar item's icon.
• NavigateUrl — Specifies the item's navigation URL. When this property is specified, the button is rendered as a hyperlink.
• Target — Specifies target attribute value for an item.
• Alignment — Specifies item alignment.
• Enabled — Specifies whether the component is enabled.

The Toolbar component also supports keyboard navigation. Press the Tab key or Shift+Tab to focus the toolbar and use Arrow keys to navigate through menu items.

You can populate the Toolbar component with data from a flat or hierarchical data source. This demo demonstrates how to bind the component to a flat data item collection. Associated code performs the following:

• Uses the Data property to specify the data source.
• Adds the <DataMappings> tag to the component markup.
• Creates a DxToolbarDataMapping instance and maps item properties to data source fields. Mappings modify the Toolbar's data model to match the data source.

If the data source uses flat data, Key and ParentKey properties are required. For hierarchical data, the Children property is required.

A toolbar item displays a drop-down list if you populate the DxToolbarItem.Items collection. The drop-down list can be displayed as a standard sub-menu, as a modal dialog, or as a modal bottom sheet. You can specify its type explicitly or allow the component to adapt to the device type. To specify the display mode, use the following properties:

• DxToolbar.DropDownDisplayMode — Applies to all menus in the toolbar.
• DxToolbarItemBase.DropDownDisplayMode — Applies to an individual item.

You can turn a parent toolbar item into a split button (where its drop-down action is segregated from the primary click region). To enable this behavior, set the SplitDropDownButton property to true.

You can use the following API members to customize the appearance of the Toolbar's root-level items:

• DxToolbar.ItemRenderStyleMode — Specifies how to apply render style to all Toolbar items.
• DxToolbar.SizeMode — Specifies the size of the Toolbar and its inner components.
• DxToolbarItem.RenderStyle — Specifies processed item render style.
• DxToolbarItem.RenderStyleMode — Specifies how to apply the render style to the processed item (this property overrides the common ItemRenderStyleMode property value).

A group of radio buttons allows users to select a single option from a group of options. To create a group of radio buttons within the Toolbar, use the same GroupName property value to arrange toolbar items into a group.

Much like radio buttons, you can define separate checked buttons (with checked and unchecked state support). To create a checked button, set the GroupName property to a unique value. This changes an item's state (checked/unchecked) on every user click.

Related API members are as follows:

• Checked — Specifies an item's checked state.
• CheckedChanged — Fires when an item's checked state changes.
• Click — Fires when a user clicks the item.

Our Blazor Toolbar component supports the use of templates. Use templates to customize the layout and appearance of a toolbar's title and associated toolbar items.

• TitleTemplate — Specifies the template used for a toolbar's title.
• Template — Specifies the template used for the toolbar item.

The Toolbar component supports adaptivity. The following properties control how the toolbar responds to changes made to a container width:

• AdaptivityAutoCollapseItemsToIcons — If true, text for all items with icons are hidden.
• AdaptivityAutoHideRootItems — If true, the toolbar combines root items in the root submenu until the toolbar contains the minimum number of root items (specified by the AdaptivityMinRootItemCount property). You can also use the item's AdaptivePriority property to hide a specific item and manage display priority.