devexpress/agent-skills/devexpress-blazor-toolbar

DevExpress Blazor Toolbar

DxToolbar is an adaptive button-based command bar for Blazor applications. It displays frequently used actions as buttons, drop-downs, checked items, and icon groups. The Toolbar adapts its layout automatically when the container width changes — collapsing items to icons or moving them into an overflow submenu.

When to Use This Skill

• Add a toolbar with action buttons to a Blazor page or layout
• Create drop-down item lists (sub-menu, modal dialog, or bottom sheet)
• Implement checked items and radio-group button behavior
• Bind the Toolbar to flat or hierarchical data collections
• Customize item appearance with render styles and templates
• Align items to the left or right
• Configure adaptive behavior for different screen widths
• Group items visually with separators
• Submit a form on a toolbar button click
• Add icons, tooltips, and navigation links to toolbar items

Prerequisites & Installation

NuGet Package

# Install from NuGet.org:
dotnet add package DevExpress.Blazor

Important: All DevExpress packages must use the same version. A valid DevExpress license is required.

Required Registration (all three steps must be present)

Program.cs — register DevExpress services:

builder.Services.AddDevExpressBlazor();

v26.1 note: DevExpress.Blazor no longer includes options.BootstrapVersion or DevExpress.Blazor.BootstrapVersion. Do not generate either API.

Components/App.razor — register theme and client scripts inside <head>:

@using DevExpress.Blazor
@DxResourceManager.RegisterTheme(Themes.Fluent)
@DxResourceManager.RegisterScripts()

Without these two calls components render without styles and client interactivity is broken.

Components/_Imports.razor — add global namespace:

@using DevExpress.Blazor

Before You Start — Ask the Developer

If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's AskUserQuestion tool or GitHub Copilot's askQuestions tool. If no such tool is available, ask the questions directly in the chat response before generating code.

1. Render mode: InteractiveServer, InteractiveWebAssembly, InteractiveAuto, or static SSR? (Static SSR limits interactivity.)
2. New or existing project?
3. Item mode: Unbound (declare items inline) or bound (bind to a data collection)?
4. Features needed: Drop-downs? Checked/radio items? Adaptivity? Icon-only items? Form submission?
5. Styling: Default, Contained, or Plain render style?

Rule: If interactivity (item clicks, checked states) is required, the page or component must use an interactive render mode.

Component Overview

DxToolbar provides:

• Unbound mode: Items declared as DxToolbarItem components between DxToolbar tags (DxToolbarItem)
• Bound mode: Items loaded from a data collection via the Data property and DxToolbarDataMapping (DxToolbar.Data)
• Drop-down items: Each DxToolbarItem can have child Items rendered as a sub-menu, modal dialog, or bottom sheet
• Checked items: Use GroupName to create toggle or radio-group buttons (DxToolbarItem.GroupName, @bind-Checked)
• Adaptivity: Automatically hides item text or moves items to an overflow menu when space is limited

Core Entry Point

@using DevExpress.Blazor
 
<DxToolbar>
    <DxToolbarItem Text="Save" IconCssClass="oi oi-cloud-upload" />
    <DxToolbarItem Text="Open" IconCssClass="oi oi-folder" />
    <DxToolbarItem IconCssClass="oi oi-cog"
                   Alignment="ToolbarItemAlignment.Right"
                   BeginGroup="true" />
</DxToolbar>

Documentation & Navigation Guide

Getting Started

📄 references/getting-started.md

When you need to:

• Install the package and add a Toolbar to a page
• Understand unbound vs. bound modes
• See a minimal working example

Items and Interactions

📄 references/items-and-interactions.md

When you need to:

• Add drop-down sub-menus to toolbar items
• Create checked items or radio-group buttons
• Handle item click events
• Add navigation links, tooltips, and icons to items
• Use ChildContent for custom inner markup or Template to replace the entire item
• Submit a form from a toolbar button

Adaptivity and Appearance

📄 references/adaptivity-and-appearance.md

When you need to:

• Configure adaptive layout (hide text, move items to submenu)
• Apply render styles (Contained, Plain)
• Set item size mode
• Bind items to a data collection
• Customize the toolbar title

Quick Start Example

📄 examples/quickstart.razor

More Examples

@page "/toolbar-demo"
@rendermode InteractiveServer
@using DevExpress.Blazor
 
<DxToolbar Title="Text Editor">
    <Items>
        <DxToolbarItem Text="New" IconCssClass="oi oi-file" Click="OnNew" />
        <DxToolbarItem Text="Open" IconCssClass="oi oi-folder" Click="OnOpen" />
        <DxToolbarItem Text="Save" IconCssClass="oi oi-cloud-upload" Click="OnSave"
                       BeginGroup="true" />
        <DxToolbarItem GroupName="align" IconCssClass="oi oi-align-left"
                       BeginGroup="true" @bind-Checked="AlignLeft" />
        <DxToolbarItem GroupName="align" IconCssClass="oi oi-align-center"
                       @bind-Checked="AlignCenter" />
        <DxToolbarItem GroupName="align" IconCssClass="oi oi-align-right"
                       @bind-Checked="AlignRight" />
        <DxToolbarItem Text="Format" BeginGroup="true">
            <Items>
                <DxToolbarItem Text="Bold" />
                <DxToolbarItem Text="Italic" />
                <DxToolbarItem Text="Underline" />
            </Items>
        </DxToolbarItem>
        <DxToolbarItem IconCssClass="oi oi-cog"
                       Alignment="ToolbarItemAlignment.Right" />
    </Items>
</DxToolbar>
 
<p>Alignment: @GetAlignment()</p>
 
@code {
    bool AlignLeft  { get; set; } = true;
    bool AlignCenter { get; set; } = false;
    bool AlignRight  { get; set; } = false;
 
    void OnNew()  => Console.WriteLine("New clicked");
    void OnOpen() => Console.WriteLine("Open clicked");
    void OnSave() => Console.WriteLine("Save clicked");
 
    string GetAlignment() =>
        AlignLeft ? "Left" : AlignCenter ? "Center" : "Right";
}

What This Does

Renders a toolbar with file action buttons, a radio-group alignment selector, a drop-down Format menu, and a right-aligned settings icon. Clicking alignment buttons updates the AlignLeft/Center/Right state.

Key Properties & API Surface

DxToolbar

DxToolbarItem