Syncfusion Blazor Toolbar

Syncfusion Blazor Toolbar Component

The Syncfusion Blazor Toolbar is a versatile component for creating interactive command bars with buttons, separators, and custom controls. It provides built-in responsive behavior and flexible item configuration.

When to Use This Skill

Use this skill when you need to:

• Create toolbars with buttons, icons, and custom controls
• Build text editors with formatting toolbars (bold, italic, alignment, etc.)
• Implement command bars or action bars in applications
• Add responsive toolbars that adapt to different screen sizes
• Configure item overflow behavior (scrollable, popup, multirow)
• Create navigation toolbars with alignment and spacing
• Add toggle buttons or stateful toolbar items
• Implement dynamic toolbars with add/remove item functionality
• Customize toolbar appearance and styling
• Enable RTL support for right-to-left languages

Component Overview

The Blazor Toolbar component features:

• Item Types: Buttons, separators, spacers, and custom templates
• Responsive Modes: Scrollable, popup, multirow, and extended overflow handling
• Alignment: Left, center, right alignment with spacer support
• Customization: Icons, tooltips, styling, templates, and RTL support
• Dynamic Management: Add, remove, enable, disable, show, hide items programmatically

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

When the user needs to:

• Install and configure the Toolbar component
• Add NuGet packages and register services
• Create a basic toolbar with items
• Understand the fundamental ToolbarItems structure
• Set up CSS themes and script references

Item Configuration and Properties

📄 Read: references/item-configuration.md

When the user needs to:

• Configure item properties (Text, PrefixIcon, SuffixIcon, Width, etc.)
• Set item alignment (Left, Center, Right)
• Define item types (Button, Separator, Input, Spacer)
• Control item visibility and enabled state
• Add tooltips to toolbar items
• Use custom CSS classes or HTML attributes
• Configure overflow behavior for individual items
• Integrate other Syncfusion components (DropDownList, NumericTextBox, etc.)
• Understand all 18 item properties in detail

Practical How-To Guides

📄 Read: references/how-to-guides.md

When the user needs to:

• Add or remove toolbar items dynamically
• Enable or disable toolbar items programmatically
• Show or hide toolbar items based on conditions
• Create toggle buttons with state management
• Customize items with HtmlAttributes and CssClass
• Set item-wise custom templates
• Add tooltips using the SfTooltip component
• Enable tab key navigation with TabIndex
• Customize the scrolling distance

Responsive Behavior and Overflow Modes

📄 Read: references/responsive-mode.md

When the user needs to:

• Configure toolbar overflow behavior (Scrollable, Popup, MultiRow, Extended)
• Set item priority for overflow handling
• Control text display in toolbar vs popup (ShowTextOn)
• Implement scrollable toolbars with navigation arrows
• Create popup toolbars with dropdown overflow
• Configure multirow or extended overflow layouts
• Handle touch gestures for scrolling

Alignment and Spacing with Spacer

📄 Read: references/alignment-spacer.md

When the user needs to:

• Use Spacer to align items left, center, and right
• Create left and right alignment patterns
• Implement right-only alignment
• Understand when to use Spacer vs Align property
• Apply flexible spacing between toolbar items

Styling and Customization

📄 Read: references/styling.md

When the user needs to:

• Customize toolbar container styling
• Style toolbar items and buttons
• Modify icon appearance
• Customize hover and focus states
• Apply custom themes
• Override default CSS classes
• Enable RTL (right-to-left) support for Arabic, Hebrew, or Urdu languages

Quick Start Example

Basic toolbar with common formatting buttons:

@using Syncfusion.Blazor.Navigations

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" PrefixIcon="e-icons e-cut"></ToolbarItem>
        <ToolbarItem Text="Copy" PrefixIcon="e-icons e-copy"></ToolbarItem>
        <ToolbarItem Text="Paste" PrefixIcon="e-icons e-paste"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Text="Bold" PrefixIcon="e-icons e-bold"></ToolbarItem>
        <ToolbarItem Text="Italic" PrefixIcon="e-icons e-italic"></ToolbarItem>
        <ToolbarItem Text="Underline" PrefixIcon="e-icons e-underline"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Common Patterns

Pattern 1: Text Editor Toolbar

Formatting toolbar with alignment and spacing:

<SfToolbar Width="600">
    <ToolbarItems>
        <ToolbarItem Text="Bold" PrefixIcon="e-icons e-bold"></ToolbarItem>
        <ToolbarItem Text="Italic" PrefixIcon="e-icons e-italic"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="Left" PrefixIcon="e-icons e-align-left"></ToolbarItem>
        <ToolbarItem Text="Center" PrefixIcon="e-icons e-align-center"></ToolbarItem>
        <ToolbarItem Text="Right" PrefixIcon="e-icons e-align-right"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Pattern 2: Responsive Toolbar with Popup

Toolbar that moves overflow items to a popup:

<SfToolbar Width="400" OverflowMode="OverflowMode.Popup">
    <ToolbarItems>
        <ToolbarItem Text="Cut" PrefixIcon="e-icons e-cut" Overflow="OverflowOption.Show"></ToolbarItem>
        <ToolbarItem Text="Copy" PrefixIcon="e-icons e-copy" Overflow="OverflowOption.Show"></ToolbarItem>
        <ToolbarItem Text="Paste" PrefixIcon="e-icons e-paste"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Text="Bold" PrefixIcon="e-icons e-bold"></ToolbarItem>
        <ToolbarItem Text="Italic" PrefixIcon="e-icons e-italic"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Pattern 3: Dynamic Toolbar with Add/Remove

Toolbar with programmatic item management:

<SfToolbar>
    <ToolbarItems>
        @foreach (var item in ToolbarItems)
        {
            <ToolbarItem Text="@item.Text" PrefixIcon="@item.Icon"></ToolbarItem>
        }
    </ToolbarItems>
</SfToolbar>

@code {
    private List<ToolbarItemData> ToolbarItems = new()
    {
        new() { Text = "Cut", Icon = "e-icons e-cut" },
        new() { Text = "Copy", Icon = "e-icons e-copy" }
    };
    
    private void AddItem()
    {
        ToolbarItems.Add(new() { Text = "Paste", Icon = "e-icons e-paste" });
    }
    
    private void RemoveItem()
    {
        if (ToolbarItems.Count > 0)
            ToolbarItems.RemoveAt(0);
    }
    
    public class ToolbarItemData
    {
        public string Text { get; set; }
        public string Icon { get; set; }
    }
}

Pattern 4: Toolbar with Custom Alignment

Left-aligned, center-aligned, and right-aligned items using Spacer:

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="File"></ToolbarItem>
        <ToolbarItem Text="Edit"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="Help"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="Settings" PrefixIcon="e-icons e-settings"></ToolbarItem>
        <ToolbarItem Text="Profile" PrefixIcon="e-icons e-user"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Key Properties Reference

SfToolbar Component Properties

ToolbarItem Properties

Implementation Guidelines

When Configuring Items

1. Use appropriate item types: Button for actions, Separator for visual dividers, Spacer for alignment, Input for custom controls 2. Add icons for better UX: Use PrefixIcon for icon-only or icon-with-text buttons 3. Provide tooltips: Set TooltipText for icon-only buttons to improve accessibility 4. Consider responsive behavior: Choose appropriate OverflowMode based on target devices 5. Set overflow priorities: Use Overflow property to control which items move to popup first

When Handling Overflow

1. Scrollable mode (default): Best for desktop applications with horizontal space 2. Popup mode: Ideal for mobile or limited-width containers 3. MultiRow mode: Good for toolbars with many related items 4. Extended mode: Similar to MultiRow but with different layout behavior

When Customizing Appearance

1. Use built-in icons: Leverage Syncfusion icon library with e-icons class 2. Apply themes consistently: Use CssClass for custom styling 3. Consider accessibility: Maintain sufficient color contrast and focus indicators 4. Test responsive behavior: Verify toolbar appearance at different widths

When Implementing Dynamic Behavior

1. Use data binding: Bind ToolbarItems to a collection for dynamic updates 2. Handle events: Use OnClick for button actions 3. Update state conditionally: Toggle Disabled or Visible properties based on application state 4. Manage item lifecycle: Add or remove items from the bound collection to update the toolbar

Common Use Cases

1. Rich Text Editors: Formatting toolbars with bold, italic, alignment, lists 2. File Managers: Action bars with upload, download, delete, rename buttons 3. Data Grids: Command toolbars for add, edit, delete, export operations 4. Image Editors: Tool palettes with drawing, cropping, filter tools 5. Navigation Menus: Top-level navigation with menu items and search 6. Dashboard Controls: Action buttons for refresh, filter, settings 7. Form Builders: Component palettes with draggable controls

Tips and Best Practices

• Icon-only buttons: Always provide TooltipText for accessibility
• Responsive design: Test toolbar at various widths to verify overflow behavior
• Keyboard navigation: Enable TabIndex for better keyboard accessibility
• Visual grouping: Use Separator to create logical groups of related items
• Performance: When using many items, consider Popup mode to reduce initial render size
• Custom templates: Use Template property for complex controls beyond standard buttons
• Alignment flexibility: Prefer Spacer over Align property for more dynamic layouts

Next Steps

After implementing the basic toolbar:

1. Explore responsive modes to handle different screen sizes 2. Add keyboard navigation with TabIndex for accessibility 3. Customize styling to match your application theme 4. Implement dynamic item management for interactive toolbars 5. Add toggle buttons or custom controls using templates 6. Integrate with other Syncfusion components (DropDownList, ColorPicker, etc.)

Align Items Using Spacer in Blazor Toolbar Component

Table of Contents

• Overview
• What is a Spacer
• Left, Center, and Right Alignment
• Left and Right Alignment
• Right Alignment Only
• Spacer vs Align Property
• Advanced Patterns
• Best Practices

Overview

The Toolbar Spacer type manages item alignment by creating adjustable empty space within the toolbar. Spacers dynamically adapt to the toolbar's width, providing flexible separation between items without fixed positioning.

What is a Spacer

A Spacer is a special toolbar item type (ItemType.Spacer) that expands to fill available horizontal space. It pushes subsequent items away, creating separation and enabling flexible alignment patterns.

Basic Syntax:

<ToolbarItem Type="ItemType.Spacer"></ToolbarItem>

Key Characteristics:

• Takes up all available horizontal space
• Multiple spacers divide space equally
• Invisible (creates space, not visual element)
• Dynamic (adjusts as toolbar resizes)
• Works in all overflow modes

Left, Center, and Right Alignment

Insert two spacers to create three distinct alignment zones.

Pattern

• Left items → Spacer → Center items → Spacer → Right items

Implementation

@using Syncfusion.Blazor.Navigations

<SfToolbar>
    <ToolbarItems>
        <!-- Left-aligned items -->
        <ToolbarItem Text="Cut"></ToolbarItem>
        <ToolbarItem Text="Copy"></ToolbarItem>
        <ToolbarItem Text="Paste"></ToolbarItem>
        
        <!-- First spacer pushes everything after to the right -->
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        
        <!-- Center-aligned items -->
        <ToolbarItem Text="Bold"></ToolbarItem>
        <ToolbarItem Text="Underline"></ToolbarItem>
        <ToolbarItem Text="Italic"></ToolbarItem>
        
        <!-- Second spacer pushes everything after to the far right -->
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        
        <!-- Right-aligned items -->
        <ToolbarItem Text="Search"></ToolbarItem>
        <ToolbarItem Text="Settings"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Visual Result

[Cut] [Copy] [Paste]  ←——— Spacer ———→  [Bold] [Underline] [Italic]  ←——— Spacer ———→  [Search] [Settings]

Use Cases

• Application toolbars with left actions, center title, right settings
• Navigation bars with logo (left), menu (center), user profile (right)
• Editor toolbars with tools (left), document info (center), save buttons (right)

Left and Right Alignment

Insert one spacer between left and right-aligned items.

Pattern

• Left items → Spacer → Right items

Implementation

@using Syncfusion.Blazor.Navigations

<SfToolbar>
    <ToolbarItems>
        <!-- Left-aligned items -->
        <ToolbarItem Text="Cut"></ToolbarItem>
        <ToolbarItem Text="Copy"></ToolbarItem>
        <ToolbarItem Text="Paste"></ToolbarItem>
        
        <!-- Spacer divides left and right -->
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        
        <!-- Right-aligned items -->
        <ToolbarItem Text="Bold"></ToolbarItem>
        <ToolbarItem Text="Underline"></ToolbarItem>
        <ToolbarItem Text="Italic"></ToolbarItem>
        <ToolbarItem Text="Search"></ToolbarItem>
        <ToolbarItem Text="Settings"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Visual Result

[Cut] [Copy] [Paste]  ←——————— Spacer ———————→  [Bold] [Underline] [Italic] [Search] [Settings]

Use Cases

• Application headers with branding (left), actions (right)
• Toolbars with file operations (left), view options (right)
• Navigation with back button (left), menu items (right)

Right Alignment Only

Insert spacer as the first item to push all following items to the right.

Pattern

• Spacer → Right items

Implementation

@using Syncfusion.Blazor.Navigations

<SfToolbar>
    <ToolbarItems>
        <!-- Spacer at start pushes everything right -->
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        
        <!-- Right-aligned items -->
        <ToolbarItem Text="Cut"></ToolbarItem>
        <ToolbarItem Text="Copy"></ToolbarItem>
        <ToolbarItem Text="Paste"></ToolbarItem>
        <ToolbarItem Text="Bold"></ToolbarItem>
        <ToolbarItem Text="Underline"></ToolbarItem>
        <ToolbarItem Text="Italic"></ToolbarItem>
        <ToolbarItem Text="Search"></ToolbarItem>
        <ToolbarItem Text="Settings"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Visual Result

←——————————— Spacer ———————————→  [Cut] [Copy] [Paste] [Bold] [Underline] [Italic] [Search] [Settings]

Use Cases

• User profile toolbars aligned to the right
• Settings or preferences menus
• Right-to-left (RTL) interface patterns
• Secondary action toolbars

Spacer vs Align Property

Both Spacer and the Align property can position items, but they work differently.

Align Property

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Home" Align="ItemAlign.Left"></ToolbarItem>
        <ToolbarItem Text="My Page" Align="ItemAlign.Center"></ToolbarItem>
        <ToolbarItem Text="Search" Align="ItemAlign.Right"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Characteristics:

• Fixed positioning (Left, Center, Right)
• Each item positioned independently
• Less flexible for dynamic layouts
• Good for simple alignment needs

Spacer Type

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Home"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="My Page"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="Search"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Characteristics:

• Fluid, responsive positioning
• Groups items naturally
• Multiple items per alignment zone
• Better for complex layouts

Comparison Table

Recommendation

Use Align Property when:

• Simple alignment (one item per zone)
• Fixed positioning is sufficient
• Quick implementation needed

Use Spacer when:

• Multiple items per alignment zone
• Responsive, fluid layout required
• Complex toolbar with many items
• Fine control over spacing

Important: Avoid mixing Align property and Spacer in the same toolbar. Choose one approach for consistency.

Advanced Patterns

Multiple Spacers for Equal Distribution

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Item 1"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="Item 2"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="Item 3"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="Item 4"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Result: Items evenly distributed across toolbar width.

Group Separator with Spacer

<SfToolbar>
    <ToolbarItems>
        <!-- File operations -->
        <ToolbarItem Text="New" PrefixIcon="e-icons e-plus"></ToolbarItem>
        <ToolbarItem Text="Open" PrefixIcon="e-icons e-folder-open"></ToolbarItem>
        <ToolbarItem Text="Save" PrefixIcon="e-icons e-save"></ToolbarItem>
        
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        
        <!-- Edit operations -->
        <ToolbarItem Text="Cut" PrefixIcon="e-icons e-cut"></ToolbarItem>
        <ToolbarItem Text="Copy" PrefixIcon="e-icons e-copy"></ToolbarItem>
        <ToolbarItem Text="Paste" PrefixIcon="e-icons e-paste"></ToolbarItem>
        
        <!-- Push remaining items to right -->
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        
        <!-- View controls -->
        <ToolbarItem Text="Zoom In" PrefixIcon="e-icons e-zoom-in"></ToolbarItem>
        <ToolbarItem Text="Zoom Out" PrefixIcon="e-icons e-zoom-out"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Combines separators for visual grouping with spacer for alignment.

Application Header Pattern

<SfToolbar Width="100%">
    <ToolbarItems>
        <!-- Logo/Brand -->
        <ToolbarItem>
            <Template>
                <div style="font-weight: bold; font-size: 18px; padding: 0 16px;">
                    MyApp
                </div>
            </Template>
        </ToolbarItem>
        
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        
        <!-- Navigation -->
        <ToolbarItem Text="Home"></ToolbarItem>
        <ToolbarItem Text="Products"></ToolbarItem>
        <ToolbarItem Text="Services"></ToolbarItem>
        <ToolbarItem Text="About"></ToolbarItem>
        
        <!-- Push user controls to right -->
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        
        <!-- User section -->
        <ToolbarItem Text="Notifications" PrefixIcon="e-icons e-bell"></ToolbarItem>
        <ToolbarItem Text="Profile" PrefixIcon="e-icons e-user"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Search Bar with Spacer

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Menu" PrefixIcon="e-icons e-menu"></ToolbarItem>
        
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        
        <!-- Center search -->
        <ToolbarItem Type="ItemType.Input">
            <Template>
                <input type="search" 
                       placeholder="Search..." 
                       style="width: 300px; padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px;" />
            </Template>
        </ToolbarItem>
        
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        
        <ToolbarItem Text="Settings" PrefixIcon="e-icons e-settings"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Centers the search bar with spacers on both sides.

Best Practices

Do:

✅ Use Spacer for flexible, responsive layouts ✅ Group related items before/after spacers ✅ Combine with separators for visual organization ✅ Test toolbar at different widths ✅ Use multiple spacers for equal distribution

Don't:

❌ Mix Align property and Spacer in same toolbar ❌ Use spacer as the only item (no effect) ❌ Add spacers between every single item (loses purpose) ❌ Forget to test responsive behavior ❌ Use too many spacers (dilutes spacing effect)

Responsive Considerations

When using spacers with responsive modes:

<!-- Good: Spacer with Popup mode -->
<SfToolbar Width="100%" OverflowMode="OverflowMode.Popup">
    <ToolbarItems>
        <ToolbarItem Text="File"></ToolbarItem>
        <ToolbarItem Text="Edit"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="Help" Overflow="OverflowOption.Show"></ToolbarItem>
        <ToolbarItem Text="Settings" Overflow="OverflowOption.Show"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

The spacer maintains alignment while overflow items move to popup appropriately.

Common Mistakes

Mistake 1: Spacer at End

<!-- ❌ Wrong: Spacer at end has no effect -->
<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Item 1"></ToolbarItem>
        <ToolbarItem Text="Item 2"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Correction:

<!-- ✅ Correct: Spacer between items -->
<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Item 1"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="Item 2"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Mistake 2: Too Many Spacers

<!-- ❌ Wrong: Spacer between each item -->
<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Item 1"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="Item 2"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="Item 3"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="Item 4"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Correction: Use spacers strategically for alignment zones, not between every item.

Getting Started with Blazor Toolbar Component

Table of Contents

• Overview
• Installation
• Install NuGet Packages
• Register Syncfusion Services
• Add Namespace Imports
• Add Stylesheet and Script References
• Create Your First Toolbar
• Basic Toolbar Structure
• Understanding ToolbarItems
• Adding Icons to Toolbar Items
• Adding Separators
• Setting Toolbar Width
• Complete Working Example
• Next Steps

Overview

The Syncfusion Blazor Toolbar component creates interactive command bars with buttons, icons, separators, and custom controls. This guide walks through installation, configuration, and creating your first toolbar.

Installation

Install NuGet Packages

Install the required NuGet packages for Toolbar and themes.

Using Package Manager Console:

Install-Package Syncfusion.Blazor.Navigations -Version {{ site.releaseversion }}
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}

Using .NET CLI:

dotnet add package Syncfusion.Blazor.Navigations -v {{ site.releaseversion }}
dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
dotnet restore

Register Syncfusion Services

Open ~/Program.cs and register the Syncfusion Blazor service:

using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// Register Syncfusion Blazor service
builder.Services.AddSyncfusionBlazor();

await builder.Build().RunAsync();

Add Namespace Imports

Open ~/_Imports.razor and add the required namespaces:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Navigations

Add Stylesheet and Script References

Add theme stylesheet and script references in ~/index.html (WebAssembly) or ~/Pages/_Host.cshtml (Server):

<head>
    <!-- Syncfusion Blazor theme -->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

<body>
    <!-- Syncfusion Blazor script -->
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

Available Themes:

• bootstrap5.css - Bootstrap 5 theme (recommended)
• material.css - Material theme
• fabric.css - Fluent theme
• tailwind.css - Tailwind CSS theme
• fluent.css - Microsoft Fluent UI theme

Create Your First Toolbar

Add a basic toolbar in any Razor page (e.g., ~/Pages/Index.razor):

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut"></ToolbarItem>
        <ToolbarItem Text="Copy"></ToolbarItem>
        <ToolbarItem Text="Paste"></ToolbarItem>
        <ToolbarItem Text="Bold"></ToolbarItem>
        <ToolbarItem Text="Underline"></ToolbarItem>
        <ToolbarItem Text="Italic"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

This creates a simple toolbar with six text buttons.

Basic Toolbar Structure

The Toolbar component follows this structure:

<SfToolbar>
    <ToolbarItems>
        <!-- Individual toolbar items go here -->
        <ToolbarItem Text="Button 1"></ToolbarItem>
        <ToolbarItem Text="Button 2"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Key Components:

• <SfToolbar> - The main toolbar container
• <ToolbarItems> - Collection wrapper for toolbar items
• <ToolbarItem> - Individual buttons or controls

Understanding ToolbarItems

Each ToolbarItem represents a button or control in the toolbar. The most basic property is Text:

<ToolbarItem Text="Cut"></ToolbarItem>

You can configure items with multiple properties:

<ToolbarItem 
    Text="Cut" 
    TooltipText="Cut selected text"
    Disabled="false"
    Visible="true">
</ToolbarItem>

Adding Icons to Toolbar Items

Use the PrefixIcon property to add icons before text:

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" PrefixIcon="e-icons e-cut"></ToolbarItem>
        <ToolbarItem Text="Copy" PrefixIcon="e-icons e-copy"></ToolbarItem>
        <ToolbarItem Text="Paste" PrefixIcon="e-icons e-paste"></ToolbarItem>
        <ToolbarItem Text="Bold" PrefixIcon="e-icons e-bold"></ToolbarItem>
        <ToolbarItem Text="Italic" PrefixIcon="e-icons e-italic"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Icon-Only Buttons:

Omit the Text property to show only the icon:

<ToolbarItem PrefixIcon="e-icons e-cut" TooltipText="Cut"></ToolbarItem>
<ToolbarItem PrefixIcon="e-icons e-copy" TooltipText="Copy"></ToolbarItem>
<ToolbarItem PrefixIcon="e-icons e-paste" TooltipText="Paste"></ToolbarItem>

Important: Always provide TooltipText for icon-only buttons to ensure accessibility.

Suffix Icons:

Use SuffixIcon to place icons after text:

<ToolbarItem Text="Upload" SuffixIcon="e-icons e-upload-1"></ToolbarItem>
<ToolbarItem Text="Download" SuffixIcon="e-icons e-download"></ToolbarItem>

Adding Separators

Use separators to visually group related items:

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" PrefixIcon="e-icons e-cut"></ToolbarItem>
        <ToolbarItem Text="Copy" PrefixIcon="e-icons e-copy"></ToolbarItem>
        <ToolbarItem Text="Paste" PrefixIcon="e-icons e-paste"></ToolbarItem>
        
        <!-- Separator between groups -->
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        
        <ToolbarItem Text="Bold" PrefixIcon="e-icons e-bold"></ToolbarItem>
        <ToolbarItem Text="Italic" PrefixIcon="e-icons e-italic"></ToolbarItem>
        <ToolbarItem Text="Underline" PrefixIcon="e-icons e-underline"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Note: Separators at the beginning or end of the toolbar are not visible.

Setting Toolbar Width

Control toolbar width using the Width property:

<!-- Fixed width -->
<SfToolbar Width="600px">
    <ToolbarItems>
        <ToolbarItem Text="Cut"></ToolbarItem>
        <ToolbarItem Text="Copy"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

<!-- Percentage width -->
<SfToolbar Width="100%">
    <ToolbarItems>
        <ToolbarItem Text="Cut"></ToolbarItem>
        <ToolbarItem Text="Copy"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

<!-- Auto width (default) -->
<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut"></ToolbarItem>
        <ToolbarItem Text="Copy"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Complete Working Example

Here's a complete example with common toolbar patterns:

@page "/toolbar-demo"
@using Syncfusion.Blazor.Navigations

<h3>Text Editor Toolbar</h3>

<SfToolbar Width="800px">
    <ToolbarItems>
        <!-- Clipboard group -->
        <ToolbarItem Text="Cut" PrefixIcon="e-icons e-cut" TooltipText="Cut"></ToolbarItem>
        <ToolbarItem Text="Copy" PrefixIcon="e-icons e-copy" TooltipText="Copy"></ToolbarItem>
        <ToolbarItem Text="Paste" PrefixIcon="e-icons e-paste" TooltipText="Paste"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        
        <!-- Formatting group -->
        <ToolbarItem Text="Bold" PrefixIcon="e-icons e-bold" TooltipText="Bold"></ToolbarItem>
        <ToolbarItem Text="Italic" PrefixIcon="e-icons e-italic" TooltipText="Italic"></ToolbarItem>
        <ToolbarItem Text="Underline" PrefixIcon="e-icons e-underline" TooltipText="Underline"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        
        <!-- Alignment group -->
        <ToolbarItem Text="Left" PrefixIcon="e-icons e-align-left" TooltipText="Align Left"></ToolbarItem>
        <ToolbarItem Text="Center" PrefixIcon="e-icons e-align-center" TooltipText="Align Center"></ToolbarItem>
        <ToolbarItem Text="Right" PrefixIcon="e-icons e-align-right" TooltipText="Align Right"></ToolbarItem>
        <ToolbarItem Text="Justify" PrefixIcon="e-icons e-justify" TooltipText="Justify"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Next Steps

Now that you have a basic toolbar running, explore these topics:

1. Item Configuration - Learn about all 18 toolbar item properties (Align, Disabled, Visible, Width, etc.) 2. How-To Guides - Add, remove, enable, disable items dynamically 3. Responsive Modes - Handle overflow with Scrollable, Popup, MultiRow, or Extended modes 4. Alignment and Spacing - Use Spacer for flexible item positioning 5. Accessibility - Implement keyboard navigation and ARIA support 6. Styling - Customize toolbar appearance with CSS

Refer to the main SKILL.md navigation guide to access detailed documentation for each topic.

How-To Guides for Blazor Toolbar Component

Table of Contents

• Overview
• Add or Remove Toolbar Items Dynamically
• Enable or Disable Toolbar Items
• Show or Hide Toolbar Items
• Add Toggle Buttons
• Customize Items with HtmlAttributes and CssClass
• Set Item-Wise Custom Templates
• Set Tooltips to Toolbar Items
• Enable Tab Key Navigation
• Customize the Scrolling Distance

Overview

This guide provides practical, task-based examples for common toolbar operations. Each section includes complete working code and explanations.

Add or Remove Toolbar Items Dynamically

Toolbar items can be added or removed dynamically by manipulating the underlying data collection.

Implementation

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfButton @onclick="AddItem" Content="Add Item"></SfButton>
<SfButton @onclick="RemoveItem" Content="Remove Item"></SfButton>
<br /><br />

<SfToolbar>
    <ToolbarItems>
        @foreach (var item in ToolbarItems)
        {
            <ToolbarItem PrefixIcon="@item.PrefixIcon" 
                         Text="@item.Text" 
                         TooltipText="@item.TooltipText">
            </ToolbarItem>
        }
    </ToolbarItems>
</SfToolbar>

@code {
    public class ToolbarItemData
    {
        public string PrefixIcon { get; set; }
        public string Text { get; set; }
        public string TooltipText { get; set; }
    }
    
    private List<ToolbarItemData> ToolbarItems = new()
    {
        new() { PrefixIcon = "e-icons e-cut", Text = "Cut", TooltipText = "Cut" },
        new() { PrefixIcon = "e-icons e-copy", Text = "Copy", TooltipText = "Copy" },
        new() { PrefixIcon = "e-icons e-paste", Text = "Paste", TooltipText = "Paste" },
        new() { PrefixIcon = "e-icons e-bold", Text = "Bold", TooltipText = "Bold" },
        new() { PrefixIcon = "e-icons e-underline", Text = "Underline", TooltipText = "Underline" }
    };
    
    private void AddItem()
    {
        ToolbarItems.Add(new()
        {
            PrefixIcon = "e-icons e-italic",
            Text = "Italic",
            TooltipText = "Italic"
        });
    }
    
    private void RemoveItem()
    {
        if (ToolbarItems.Count > 0)
        {
            ToolbarItems.RemoveAt(0);
        }
    }
}

Key Points

• Use @foreach loop to iterate over a collection
• Update the collection to add or remove items
• The toolbar automatically re-renders when the collection changes
• Check collection count before removing to avoid errors

Advanced: Insert at Specific Position

private void InsertItem(int index)
{
    ToolbarItems.Insert(index, new()
    {
        PrefixIcon = "e-icons e-paste",
        Text = "Paste",
        TooltipText = "Paste"
    });
}

private void RemoveItemAt(int index)
{
    if (index >= 0 && index < ToolbarItems.Count)
    {
        ToolbarItems.RemoveAt(index);
    }
}

Enable or Disable Toolbar Items

Control item enabled state using the Disabled property with data binding.

Implementation

@using Syncfusion.Blazor.Navigations

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem PrefixIcon="e-icons e-cut" 
                     OnClick="@OnCutClick" 
                     Text="Cut" 
                     TooltipText="Cut">
        </ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-paste" 
                     Disabled="@IsPasteDisabled" 
                     Text="Paste" 
                     TooltipText="Paste">
        </ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-bold" Text="Bold" TooltipText="Bold"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-italic" Text="Italic" TooltipText="Italic"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

@code {
    private bool IsPasteDisabled = true;
    
    private void OnCutClick()
    {
        // Simulate cutting text - enables paste
        IsPasteDisabled = false;
    }
}

Key Points

• Use Disabled property with data binding
• Update the boolean flag to enable/disable items
• Disabled items appear grayed out and don't respond to clicks

Multiple Items Example

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Select All" OnClick="@OnSelectAll"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Text="Copy" Disabled="@IsSelectionDisabled"></ToolbarItem>
        <ToolbarItem Text="Cut" Disabled="@IsSelectionDisabled"></ToolbarItem>
        <ToolbarItem Text="Delete" Disabled="@IsSelectionDisabled"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

@code {
    private bool IsSelectionDisabled = true;
    
    private void OnSelectAll()
    {
        // Enable selection-based actions
        IsSelectionDisabled = false;
    }
}

Show or Hide Toolbar Items

Control item visibility using the Visible property with data binding.

Implementation

@using Syncfusion.Blazor.Navigations

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem PrefixIcon="e-icons e-cut" 
                     OnClick="@OnCutClick" 
                     Text="Cut" 
                     TooltipText="Cut">
        </ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-paste" 
                     Visible="@IsPasteVisible" 
                     Text="Paste" 
                     TooltipText="Paste">
        </ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-bold" Text="Bold" TooltipText="Bold"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-italic" Text="Italic" TooltipText="Italic"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

@code {
    private bool IsPasteVisible = false;
    
    private void OnCutClick()
    {
        // Show paste button after cut
        IsPasteVisible = true;
    }
}

Key Points

• Use Visible property with data binding
• Hidden items don't occupy space in the toolbar
• Useful for conditional UI based on user permissions or state

Permission-Based Visibility

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="View" Visible="true"></ToolbarItem>
        <ToolbarItem Text="Edit" Visible="@HasEditPermission"></ToolbarItem>
        <ToolbarItem Text="Delete" Visible="@HasDeletePermission"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator" Visible="@HasAdminPermission"></ToolbarItem>
        <ToolbarItem Text="Settings" Visible="@HasAdminPermission"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

@code {
    private bool HasEditPermission = true;
    private bool HasDeletePermission = false;
    private bool HasAdminPermission = false;
}

Add Toggle Buttons

Create toggle buttons using the Template property with Syncfusion Button component's IsToggle feature.

Implementation

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem>
            <Template>
                <SfButton CssClass="e-flat" 
                          IconCss="@PlayIconCss" 
                          IsToggle="true" 
                          @onclick="@OnPlayClick">
                </SfButton>
            </Template>
        </ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem>
            <Template>
                <SfButton CssClass="e-flat" 
                          IconCss="@ZoomIconCss" 
                          IsToggle="true" 
                          @onclick="@OnZoomClick">
                </SfButton>
            </Template>
        </ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem>
            <Template>
                <SfButton CssClass="e-flat" 
                          IconCss="@VisibleIconCss" 
                          IsToggle="true" 
                          Content="@ContentText" 
                          @onclick="@OnVisibleClick">
                </SfButton>
            </Template>
        </ToolbarItem>
    </ToolbarItems>
</SfToolbar>

<div style="display:@DisplayValue; margin-top: 20px;">
    <p>This content toggles when you click the visibility button.</p>
</div>

@code {
    private string PlayIconCss = "e-icons e-play";
    private string ZoomIconCss = "e-icons e-zoom-in";
    private string VisibleIconCss = "e-icons e-hide";
    private string ContentText = "Hide";
    private string DisplayValue = "block";
    
    private void OnPlayClick()
    {
        PlayIconCss = PlayIconCss == "e-icons e-play" 
            ? "e-icons e-pause" 
            : "e-icons e-play";
    }
    
    private void OnZoomClick()
    {
        ZoomIconCss = ZoomIconCss == "e-icons e-zoom-in" 
            ? "e-icons e-zoom-out" 
            : "e-icons e-zoom-in";
    }
    
    private void OnVisibleClick()
    {
        if (ContentText == "Hide")
        {
            DisplayValue = "none";
            ContentText = "Show";
            VisibleIconCss = "e-icons e-show";
        }
        else
        {
            DisplayValue = "block";
            ContentText = "Hide";
            VisibleIconCss = "e-icons e-hide";
        }
    }
}

Key Points

• Use Template property with SfButton component
• Set IsToggle="true" on the button
• Update icon or content in click handler based on current state
• Store toggle state in component variables

Simple Toggle Example

<ToolbarItem>
    <Template>
        <SfButton IsToggle="true" 
                  Content="@(IsActive ? "Active" : "Inactive")" 
                  @onclick="@(() => IsActive = !IsActive)">
        </SfButton>
    </Template>
</ToolbarItem>

@code {
    private bool IsActive = false;
}

Customize Items with HtmlAttributes and CssClass

Apply custom styling and HTML attributes to toolbar items.

Using CssClass

@using Syncfusion.Blazor.Navigations

<SfToolbar Width="500">
    <ToolbarItems>
        <ToolbarItem Text="Bold" CssClass="custom-bold"></ToolbarItem>
        <ToolbarItem Text="Italic"></ToolbarItem>
        <ToolbarItem Text="Uppercase" CssClass="text-uppercase"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

<style>
    .custom-bold .e-tbar-btn-text {
        font-weight: 900;
        color: #d32f2f;
    }
    
    .text-uppercase .e-tbar-btn-text {
        font-variant: small-caps;
        color: #1976d2;
    }
</style>

Using HtmlAttributes

<SfToolbar Width="500">
    <ToolbarItems>
        <ToolbarItem Text="Bold" HtmlAttributes="@BoldAttributes"></ToolbarItem>
        <ToolbarItem Text="Italic" HtmlAttributes="@ItalicAttributes"></ToolbarItem>
        <ToolbarItem Text="Underline"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

@code {
    private Dictionary<string, object> BoldAttributes = new()
    {
        { "class", "custom-bold" },
        { "id", "bold-button" },
        { "data-action", "format" },
        { "role", "button" }
    };
    
    private Dictionary<string, object> ItalicAttributes = new()
    {
        { "style", "background-color: #f0f0f0; border-radius: 4px;" },
        { "data-tooltip", "Apply italic formatting" }
    };
}

Combined Example

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Save" 
                     CssClass="primary-action" 
                     HtmlAttributes="@SaveAttributes" 
                     PrefixIcon="e-icons e-save">
        </ToolbarItem>
        <ToolbarItem Text="Cancel" 
                     CssClass="secondary-action" 
                     HtmlAttributes="@CancelAttributes">
        </ToolbarItem>
    </ToolbarItems>
</SfToolbar>

<style>
    .primary-action .e-tbar-btn {
        background-color: #4caf50;
        color: white;
    }
    
    .secondary-action .e-tbar-btn {
        background-color: #f44336;
        color: white;
    }
</style>

@code {
    private Dictionary<string, object> SaveAttributes = new()
    {
        { "id", "save-btn" },
        { "data-action", "save" }
    };
    
    private Dictionary<string, object> CancelAttributes = new()
    {
        { "id", "cancel-btn" },
        { "data-action", "cancel" }
    };
}

Set Item-Wise Custom Templates

Use the Template property to render custom content for toolbar items.

Basic Template Example

@using Syncfusion.Blazor.Navigations

<SfToolbar Width="300">
    <ToolbarItems>
        <ToolbarItem Text="Cut" TooltipText="Cut"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Text="Paste"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem>
            <Template>
                <input type="checkbox" title="Accept" checked />
            </Template>
        </ToolbarItem>
        <ToolbarItem Text="Undo"></ToolbarItem>
        <ToolbarItem Text="Redo"></ToolbarItem>
        <ToolbarItem>
            <Template>
                <button class="e-btn">Custom Button</button>
            </Template>
        </ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Template with Syncfusion Components

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="File"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        
        <!-- Font dropdown -->
        <ToolbarItem Type="ItemType.Input">
            <Template>
                <SfDropDownList TValue="string" TItem="string" 
                                Placeholder="Select font" 
                                DataSource="@Fonts" 
                                Width="150">
                </SfDropDownList>
            </Template>
        </ToolbarItem>
        
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        
        <!-- Font size -->
        <ToolbarItem Type="ItemType.Input">
            <Template>
                <SfNumericTextBox TValue="int" 
                                  Value="12" 
                                  Min="8" 
                                  Max="72" 
                                  Width="80">
                </SfNumericTextBox>
            </Template>
        </ToolbarItem>
    </ToolbarItems>
</SfToolbar>

@code {
    private List<string> Fonts = new() 
    { 
        "Arial", 
        "Calibri", 
        "Georgia", 
        "Times New Roman", 
        "Verdana" 
    };
}

Advanced Template with Logic

<ToolbarItem>
    <Template>
        <div class="custom-control">
            <label>@CurrentUser</label>
            <button @onclick="@Logout" class="e-btn e-small">
                Logout
            </button>
        </div>
    </Template>
</ToolbarItem>

<style>
    .custom-control {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 8px;
    }
</style>

@code {
    private string CurrentUser = "John Doe";
    
    private void Logout()
    {
        // Logout logic
    }
}

Set Tooltips to Toolbar Items

Add tooltips using the built-in TooltipText property or integrate with SfTooltip component for advanced features.

Basic Tooltip with TooltipText

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" TooltipText="Cut selected text (Ctrl+X)"></ToolbarItem>
        <ToolbarItem Text="Copy" TooltipText="Copy to clipboard (Ctrl+C)"></ToolbarItem>
        <ToolbarItem Text="Paste" TooltipText="Paste from clipboard (Ctrl+V)"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Advanced Tooltip with SfTooltip

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Popups

<SfTooltip Target="#toolbar-element [title]">
    <SfToolbar ID="toolbar-element" Width="300">
        <ToolbarItems>
            <ToolbarItem Type="ItemType.Button" Text="Cut" TooltipText="Cut"></ToolbarItem>
            <ToolbarItem Type="ItemType.Button" Text="Copy" TooltipText="Copy"></ToolbarItem>
            <ToolbarItem Type="ItemType.Button" Text="Paste" TooltipText="Paste"></ToolbarItem>
            <ToolbarItem Type="ItemType.Button" Text="Undo" TooltipText="Undo"></ToolbarItem>
            <ToolbarItem Type="ItemType.Button" Text="Redo" TooltipText="Redo"></ToolbarItem>
        </ToolbarItems>
    </SfToolbar>
</SfTooltip>

Key Points

• TooltipText property provides simple tooltip functionality
• Use SfTooltip component for advanced features (animations, positioning, content templates)
• Target selector [title] captures all items with TooltipText
• Always provide tooltips for icon-only buttons

Enable Tab Key Navigation

Enable tab key navigation using the TabIndex property.

Example with Explicit Order

@using Syncfusion.Blazor.Navigations

<SfToolbar Width="600">
    <ToolbarItems>
        <ToolbarItem SuffixIcon="e-icons e-cut" Text="Cut" TabIndex="1"></ToolbarItem>
        <ToolbarItem SuffixIcon="e-icons e-copy" Text="Copy" TabIndex="2"></ToolbarItem>
        <ToolbarItem SuffixIcon="e-icons e-paste" Text="Paste" TabIndex="3"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem SuffixIcon="e-icons e-bold" Text="Bold" TabIndex="4"></ToolbarItem>
        <ToolbarItem SuffixIcon="e-icons e-italic" Text="Italic" TabIndex="5"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Example with Natural Order

<SfToolbar Width="600">
    <ToolbarItems>
        <ToolbarItem SuffixIcon="e-icons e-cut" Text="Cut" TabIndex="0"></ToolbarItem>
        <ToolbarItem SuffixIcon="e-icons e-copy" Text="Copy" TabIndex="0"></ToolbarItem>
        <ToolbarItem SuffixIcon="e-icons e-paste" Text="Paste" TabIndex="0"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem SuffixIcon="e-icons e-bold" Text="Bold" TabIndex="0"></ToolbarItem>
        <ToolbarItem SuffixIcon="e-icons e-italic" Text="Italic" TabIndex="0"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Key Points

• TabIndex > 0: Explicit navigation order (1, 2, 3, ...)
• TabIndex = 0: Natural source order navigation
• TabIndex < 0: Disables tab navigation for that item
• By default, toolbar uses arrow key navigation
• TabIndex adds Tab/Shift+Tab navigation on top of arrow keys

Mixed Navigation Example

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Primary" TabIndex="1"></ToolbarItem>
        <ToolbarItem Text="Secondary" TabIndex="2"></ToolbarItem>
        <ToolbarItem Text="Skip" TabIndex="-1"></ToolbarItem>
        <ToolbarItem Text="Tertiary" TabIndex="3"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

In this example, "Skip" button is excluded from tab navigation but still accessible via arrow keys.

Customize the Scrolling Distance

Customize how far the toolbar scrolls when using navigation arrows in Scrollable mode.

Implementation

@using Syncfusion.Blazor.Navigations

<SfToolbar Width="600" ScrollStep="50">
    <ToolbarItems>
        <ToolbarItem PrefixIcon="e-icons e-cut" TooltipText="Cut"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-copy" TooltipText="Copy"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-paste" TooltipText="Paste"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-bold" TooltipText="Bold"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-underline" TooltipText="Underline"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-italic" TooltipText="Italic"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-paint-bucket" TooltipText="Color"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-align-left" TooltipText="Left"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-align-center" TooltipText="Center"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-align-right" TooltipText="Right"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-justify" TooltipText="Justify"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-list-unordered" TooltipText="Bullets"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-list-ordered" TooltipText="Numbering"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Key Points

• ScrollStep property defines scroll distance in pixels
• Default value is 30 pixels
• Applies only to Scrollable mode (default overflow mode)
• Larger values scroll more items at once
• Smaller values provide finer control

Different Scroll Step Values

<!-- Fast scrolling -->
<SfToolbar Width="400" ScrollStep="100">
    <!-- Items -->
</SfToolbar>

<!-- Slow scrolling (default-like) -->
<SfToolbar Width="400" ScrollStep="30">
    <!-- Items -->
</SfToolbar>

<!-- Very fine control -->
<SfToolbar Width="400" ScrollStep="10">
    <!-- Items -->
</SfToolbar>

Choose ScrollStep value based on:

• Average item width
• Number of visible items
• User preference for scroll speed
• Touch device vs mouse device usage

Item Configuration in Blazor Toolbar Component

Table of Contents

• Overview
• Item Properties Reference
• Align Property
• CssClass Property
• Disabled Property
• HtmlAttributes Property
• Id Property
• Overflow Property
• PrefixIcon Property
• ShowAlwaysInPopup Property
• ShowTextOn Property
• SuffixIcon Property
• TabIndex Property
• Template Property
• Text Property
• TooltipText Property
• Type Property
• Button Type
• Separator Type
• Input Type
• Spacer Type
• Visible Property
• Width Property
• Integrating Other Components

Overview

The Blazor Toolbar can be configured with 18 different item properties that control appearance, behavior, and functionality. Each ToolbarItem supports these properties for complete customization.

Item Properties Reference

Quick reference of all available properties:

Align Property

Specifies the alignment of toolbar items. Each item aligns independently according to its Align property.

Values:

• ItemAlign.Left - Aligns item to the left (default)
• ItemAlign.Center - Aligns item at the center
• ItemAlign.Right - Aligns item to the right

Example:

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Home" Align="ItemAlign.Left"></ToolbarItem>
        <ToolbarItem Text="My Page" Align="ItemAlign.Center"></ToolbarItem>
        <ToolbarItem Text="Search" Align="ItemAlign.Right"></ToolbarItem>
        <ToolbarItem Text="Settings" Align="ItemAlign.Right"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Note: For more flexible alignment without using the Align property, use the Spacer type. See the alignment-spacer.md reference for details.

CssClass Property

Adds single or multiple CSS classes to toolbar items for custom styling.

Example:

<SfToolbar Width="500">
    <ToolbarItems>
        <ToolbarItem Text="Bold" CssClass="custom-bold"></ToolbarItem>
        <ToolbarItem Text="Italic"></ToolbarItem>
        <ToolbarItem Text="Uppercase" CssClass="text-uppercase"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

<style>
    .custom-bold .e-tbar-btn-text {
        font-weight: 900;
    }
    
    .text-uppercase .e-tbar-btn-text {
        font-variant: small-caps;
    }
</style>

Disabled Property

Enables or disables a toolbar item. When true, the item appears grayed out and cannot be clicked.

Example:

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" PrefixIcon="e-icons e-cut"></ToolbarItem>
        <ToolbarItem Text="Copy" PrefixIcon="e-icons e-copy"></ToolbarItem>
        <ToolbarItem Text="Paste" PrefixIcon="e-icons e-paste" Disabled="true"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Practical Use: Disable items based on application state (e.g., disable "Paste" when clipboard is empty).

HtmlAttributes Property

Adds custom HTML attributes such as id, class, style, role, or data attributes to the toolbar item element.

Example:

<SfToolbar Width="500">
    <ToolbarItems>
        <ToolbarItem Text="Bold" HtmlAttributes="@BoldAttributes"></ToolbarItem>
        <ToolbarItem Text="Italic"></ToolbarItem>
        <ToolbarItem Text="Underline"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

@code {
    Dictionary<string, object> BoldAttributes = new()
    {
        { "class", "custom-bold" },
        { "id", "bold-button" },
        { "data-action", "format" }
    };
}

Behavior Notes:

• style attribute: New styles replace existing ones
• class attribute: New classes are added (don't replace existing ones)

Id Property

Specifies a unique ID for the toolbar item's button or input element.

Example:

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Id="home-btn" Text="Home" Align="ItemAlign.Left"></ToolbarItem>
        <ToolbarItem Id="search-btn" Text="Search" Align="ItemAlign.Right"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Use Cases:

• Targeting items with JavaScript or CSS
• Accessibility ARIA references
• Integration with other components

Overflow Property

Specifies display priority when toolbar content overflows. Only applicable to Popup mode.

Values:

• OverflowOption.Show - Always displays on toolbar (primary priority)
• OverflowOption.Hide - Always displays in popup (secondary priority)
• OverflowOption.None - No priority, moves to popup based on order (default)

Example:

<SfToolbar Width="300px" OverflowMode="OverflowMode.Popup">
    <ToolbarItems>
        <ToolbarItem Text="Cut" Overflow="OverflowOption.Show"></ToolbarItem>
        <ToolbarItem Text="Copy" Overflow="OverflowOption.Show"></ToolbarItem>
        <ToolbarItem Text="Paste"></ToolbarItem>
        <ToolbarItem Text="Bold"></ToolbarItem>
        <ToolbarItem Text="Italic"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

In this example, "Cut" and "Copy" always remain on the toolbar, while other items move to popup when space is limited.

PrefixIcon Property

Defines CSS classes for an icon displayed before the text content. The icon appears before text if text is available; otherwise, only the icon renders.

Example:

<SfToolbar Width="600">
    <ToolbarItems>
        <ToolbarItem PrefixIcon="e-icons e-cut" Text="Cut"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-copy" Text="Copy"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-paste" Text="Paste"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-bold" Text="Bold"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-italic" Text="Italic"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Icon-Only Buttons:

<ToolbarItem PrefixIcon="e-icons e-cut" TooltipText="Cut"></ToolbarItem>
<ToolbarItem PrefixIcon="e-icons e-copy" TooltipText="Copy"></ToolbarItem>

ShowAlwaysInPopup Property

Forces an item to always appear in the popup, even if there's space on the toolbar. Only works in Popup mode.

Example:

<SfToolbar Width="300px" OverflowMode="OverflowMode.Popup">
    <ToolbarItems>
        <ToolbarItem Text="Cut" ShowAlwaysInPopup="true" TooltipText="Cut"></ToolbarItem>
        <ToolbarItem Text="Copy" TooltipText="Copy"></ToolbarItem>
        <ToolbarItem Text="Paste" TooltipText="Paste"></ToolbarItem>
        <ToolbarItem Text="Bold" TooltipText="Bold"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Note: This property doesn't work for items with Overflow="OverflowOption.Show".

ShowTextOn Property

Controls where button text appears in Popup mode.

Values:

• DisplayMode.Toolbar - Text visible only on toolbar
• DisplayMode.Overflow - Text visible only in popup
• DisplayMode.Both - Text visible in both locations (default)

Example:

<SfToolbar Width="300" OverflowMode="OverflowMode.Popup">
    <ToolbarItems>
        <ToolbarItem PrefixIcon="e-icons e-cut" Text="Cut" ShowTextOn="DisplayMode.Overflow"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-copy" Text="Copy" ShowTextOn="DisplayMode.Overflow"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-paste" Text="Paste" ShowTextOn="DisplayMode.Overflow"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-bold" Text="Bold" ShowTextOn="DisplayMode.Overflow"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

This creates icon-only buttons on the toolbar, but displays both icon and text in the overflow popup.

SuffixIcon Property

Defines CSS classes for an icon displayed after the text content.

Example:

<SfToolbar Width="600">
    <ToolbarItems>
        <ToolbarItem SuffixIcon="e-icons e-cut" Text="Cut"></ToolbarItem>
        <ToolbarItem SuffixIcon="e-icons e-copy" Text="Copy"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem SuffixIcon="e-icons e-upload-1" Text="Upload"></ToolbarItem>
        <ToolbarItem SuffixIcon="e-icons e-download" Text="Download"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Note: If both PrefixIcon and SuffixIcon are specified, only the PrefixIcon is displayed.

TabIndex Property

Enables tab key navigation for toolbar items. By default, navigation uses arrow keys only.

Values:

• 0 - Natural source order navigation
• > 0 - Explicit navigation order
• < 0 - Disables tab navigation for the item

Example with Explicit Order:

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" TabIndex="1"></ToolbarItem>
        <ToolbarItem Text="Copy" TabIndex="2"></ToolbarItem>
        <ToolbarItem Text="Paste" TabIndex="3"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Example with Natural Order:

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" TabIndex="0"></ToolbarItem>
        <ToolbarItem Text="Copy" TabIndex="0"></ToolbarItem>
        <ToolbarItem Text="Paste" TabIndex="0"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

See the accessibility.md reference for complete keyboard navigation details.

Template Property

Allows custom content rendering using a RenderFragment. Enables integration with any Blazor component or HTML.

Basic HTML Example:

<SfToolbar Width="300">
    <ToolbarItems>
        <ToolbarItem Text="Cut"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem>
            <Template>
                <input type="checkbox" title="Accept" checked />
            </Template>
        </ToolbarItem>
        <ToolbarItem Text="Undo"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Blazor Component Example:

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut"></ToolbarItem>
        <ToolbarItem>
            <Template>
                <button class="e-btn">Custom Button</button>
            </Template>
        </ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Text Property

Specifies the text content displayed on the toolbar button.

Example:

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut"></ToolbarItem>
        <ToolbarItem Text="Copy"></ToolbarItem>
        <ToolbarItem Text="Paste"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

TooltipText Property

Sets the tooltip text displayed when hovering over the toolbar item.

Example:

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" TooltipText="Cut selected text"></ToolbarItem>
        <ToolbarItem Text="Copy" TooltipText="Copy to clipboard"></ToolbarItem>
        <ToolbarItem Text="Paste" TooltipText="Paste from clipboard"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Best Practice: Always provide TooltipText for icon-only buttons to improve accessibility.

Type Property

Specifies the type of toolbar item to render.

Values:

• ItemType.Button - Standard button (default)
• ItemType.Separator - Visual divider line
• ItemType.Input - Container for custom input controls
• ItemType.Spacer - Flexible space for alignment

Button Type

Creates a button with text, icons, or both. This is the default type.

Properties:

• Text - Button text
• PrefixIcon - Icon before text
• SuffixIcon - Icon after text
• Width - Button width
• Id - Unique identifier

Example:

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Type="ItemType.Button" Text="Cut" PrefixIcon="e-icons e-cut"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" Text="Copy" PrefixIcon="e-icons e-copy"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Note: Type="ItemType.Button" can be omitted as it's the default.

Separator Type

Adds a vertical line to visually separate toolbar items.

Example:

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut"></ToolbarItem>
        <ToolbarItem Text="Copy"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Text="Paste"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Text="Undo"></ToolbarItem>
        <ToolbarItem Text="Redo"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Note: Separators at the first or last position are not visible.

Input Type

Creates a container for Syncfusion input components like NumericTextBox, DropDownList, RadioButton, or CheckBox.

NumericTextBox Example:

@using Syncfusion.Blazor.Inputs

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Type="ItemType.Input">
            <Template>
                <SfNumericTextBox Width="150" Value="1" Format="c2"></SfNumericTextBox>
            </Template>
        </ToolbarItem>
    </ToolbarItems>
</SfToolbar>

DropDownList Example:

@using Syncfusion.Blazor.DropDowns

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Type="ItemType.Input">
            <Template>
                <SfDropDownList TValue="string" TItem="string" DataSource="@Options" Width="120"></SfDropDownList>
            </Template>
        </ToolbarItem>
    </ToolbarItems>
</SfToolbar>

@code {
    private List<string> Options = new() { "Option 1", "Option 2", "Option 3" };
}

CheckBox Example:

@using Syncfusion.Blazor.Buttons

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Type="ItemType.Input">
            <Template>
                <SfCheckBox Checked="true" Label="Enable Feature"></SfCheckBox>
            </Template>
        </ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Spacer Type

Adds flexible empty space for aligning toolbar items. Spacers expand to fill available space.

Example:

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="File"></ToolbarItem>
        <ToolbarItem Text="Edit"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="Settings"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

See the alignment-spacer.md reference for detailed alignment patterns.

Visible Property

Controls whether an item is visible or hidden.

Example:

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" Visible="true"></ToolbarItem>
        <ToolbarItem Text="Copy" Visible="true"></ToolbarItem>
        <ToolbarItem Text="Paste" Visible="false"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Use Case: Hide items based on user permissions or application state.

Width Property

Specifies the width of a toolbar button item.

Example:

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Cut" Width="100px"></ToolbarItem>
        <ToolbarItem Text="Copy"></ToolbarItem>
        <ToolbarItem Text="Paste"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Integrating Other Components

The Type="ItemType.Input" with Template property allows integration of any Syncfusion component.

Complete Example with Multiple Components:

@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Type="ItemType.Input">
            <Template>
                <SfNumericTextBox Width="150" Value="1" Format="c2"></SfNumericTextBox>
            </Template>
        </ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Type="ItemType.Input">
            <Template>
                <SfDropDownList TValue="string" TItem="Game" 
                                DataSource="@Games" Width="120" Index="2">
                    <DropDownListFieldSettings Value="Text"></DropDownListFieldSettings>
                </SfDropDownList>
            </Template>
        </ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Type="ItemType.Input">
            <Template>
                <SfCheckBox Checked="true" Label="CheckBox"></SfCheckBox>
            </Template>
        </ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Type="ItemType.Input">
            <Template>
                <SfRadioButton Label="Radio" Name="default" Value="Radio" @bind-Checked="CheckedValue"></SfRadioButton>
            </Template>
        </ToolbarItem>
    </ToolbarItems>
</SfToolbar>

@code {
    private string CheckedValue = "Radio";
    
    public class Game
    {
        public string Id { get; set; }
        public string Text { get; set; }
    }
    
    private List<Game> Games = new()
    {
        new() { Id = "Game2", Text = "Badminton" },
        new() { Id = "Game4", Text = "Cricket" },
        new() { Id = "Game5", Text = "Football" }
    };
}

This demonstrates NumericTextBox, DropDownList, CheckBox, and RadioButton integration within a toolbar.

Responsive Mode in Blazor Toolbar Component

Table of Contents

• Overview
• Scrollable Mode
• Popup Mode
• Priority of Items
• Text Mode for Buttons
• MultiRow Mode
• Extended Mode
• Choosing the Right Mode
• Common Scenarios

Overview

The Toolbar component provides four display modes (OverflowMode) to handle content that exceeds the viewing area:

• Scrollable - Horizontal scrolling with navigation arrows (default)
• Popup - Overflow items move to a dropdown popup
• MultiRow - Overflow items wrap to additional inline rows
• Extended - Overflow items displayed in next row below toolbar

Use the OverflowMode property to set the desired mode:

<SfToolbar OverflowMode="OverflowMode.Popup">
    <!-- Items -->
</SfToolbar>

Scrollable Mode

The default OverflowMode displays toolbar items in a single line with horizontal scrolling enabled when items overflow.

Features

• Left and right navigation arrows at toolbar edges
• Click arrows to scroll
• Hold arrow to scroll continuously
• Touch swipe gestures on mobile devices
• Left arrow disabled initially (scroll right first)
• Arrow disables when reaching start/end

Implementation

@using Syncfusion.Blazor.Navigations

<SfToolbar Width="600">
    <ToolbarItems>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-cut" Text="Cut"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-copy" Text="Copy"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-paste" Text="Paste"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-bold" Text="Bold"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-underline" Text="Underline"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-italic" Text="Italic"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-paint-bucket" Text="Color"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-list-unordered" Text="Bullets"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-list-ordered" Text="Numbering"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-upload-1" Text="Upload"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-download" Text="Download"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Scrollable Mode is Best For:

• Desktop applications with sufficient horizontal space
• Toolbars where all items should remain visible but space-constrained
• Text editor toolbars with many formatting options
• Applications where users expect horizontal scrolling

Customizing Scroll Distance

Use the ScrollStep property to control how far the toolbar scrolls per arrow click:

<SfToolbar Width="600" ScrollStep="50">
    <ToolbarItems>
        <!-- Items -->
    </ToolbarItems>
</SfToolbar>

• Default: 30 pixels
• Larger values: Faster scrolling
• Smaller values: Finer control

Popup Mode

In Popup mode, items that don't fit in the available space move to an overflow popup dropdown.

Features

• Overflow items accessible via dropdown icon
• Clean, compact toolbar appearance
• Configurable item priority (Show/Hide/None)
• Text display modes (Toolbar/Overflow/Both)
• Popup opens on dropdown icon click

Implementation

@using Syncfusion.Blazor.Navigations

<SfToolbar Width="380" OverflowMode="OverflowMode.Popup">
    <ToolbarItems>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-cut" Text="Cut"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-copy" Text="Copy"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-paste" Text="Paste"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-bold" Text="Bold"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-underline" Text="Underline"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-italic" Text="Italic"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-paint-bucket" Text="Color"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-erase" Text="Clear"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-refresh" Text="Reload"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-export" Text="Export"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Popup Mode is Best For:

• Mobile applications with limited screen width
• Toolbars with many items that users access infrequently
• Responsive designs that adapt to different screen sizes
• Clean, minimal UI design

Note: If popup content exceeds page height, overflowing items in the popup will not be visible.

Priority of Items

Control which items stay on the toolbar vs move to popup using the Overflow property.

Values:

• OverflowOption.Show - Primary priority (always on toolbar)
• OverflowOption.Hide - Secondary priority (always in popup)
• OverflowOption.None - No priority (default order)

Example:

<SfToolbar Width="300px" OverflowMode="OverflowMode.Popup">
    <ToolbarItems>
        <!-- Primary: Always visible on toolbar -->
        <ToolbarItem Text="Cut" 
                     PrefixIcon="e-icons e-cut" 
                     Overflow="OverflowOption.Show">
        </ToolbarItem>
        <ToolbarItem Text="Copy" 
                     PrefixIcon="e-icons e-copy" 
                     Overflow="OverflowOption.Show">
        </ToolbarItem>
        
        <!-- Secondary: Always in popup -->
        <ToolbarItem Text="Settings" 
                     Overflow="OverflowOption.Hide">
        </ToolbarItem>
        
        <!-- Normal: Moves to popup when no space -->
        <ToolbarItem Text="Paste"></ToolbarItem>
        <ToolbarItem Text="Bold"></ToolbarItem>
        <ToolbarItem Text="Italic"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Priority Order: 1. Items with Overflow="OverflowOption.Show" appear first on toolbar 2. If primary items also overflow (not enough space), they move to top of popup 3. Items with Overflow="OverflowOption.None" fill remaining toolbar space 4. Items with Overflow="OverflowOption.Hide" always appear in popup

ShowAlwaysInPopup Property

Alternative way to keep an item in popup permanently:

<SfToolbar Width="300px" OverflowMode="OverflowMode.Popup">
    <ToolbarItems>
        <ToolbarItem Text="Cut" ShowAlwaysInPopup="true"></ToolbarItem>
        <ToolbarItem Text="Copy"></ToolbarItem>
        <ToolbarItem Text="Paste"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Note: ShowAlwaysInPopup doesn't work with Overflow="OverflowOption.Show".

Text Mode for Buttons

The ShowTextOn property controls where button text appears in Popup mode.

Values:

• DisplayMode.Both - Text visible on toolbar and popup (default)
• DisplayMode.Overflow - Text visible only in popup
• DisplayMode.Toolbar - Text visible only on toolbar

Example: Icon-Only Toolbar, Text in Popup

<SfToolbar Width="300" OverflowMode="OverflowMode.Popup">
    <ToolbarItems>
        <ToolbarItem Type="ItemType.Button" 
                     PrefixIcon="e-icons e-cut" 
                     Text="Cut" 
                     ShowTextOn="DisplayMode.Overflow" 
                     Overflow="OverflowOption.Show">
        </ToolbarItem>
        <ToolbarItem Type="ItemType.Button" 
                     PrefixIcon="e-icons e-copy" 
                     Text="Copy" 
                     ShowTextOn="DisplayMode.Overflow" 
                     Overflow="OverflowOption.Show">
        </ToolbarItem>
        <ToolbarItem Type="ItemType.Button" 
                     PrefixIcon="e-icons e-paste" 
                     Text="Paste" 
                     ShowTextOn="DisplayMode.Overflow" 
                     Overflow="OverflowOption.Show">
        </ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" 
                     PrefixIcon="e-icons e-bold" 
                     Text="Bold" 
                     ShowTextOn="DisplayMode.Overflow">
        </ToolbarItem>
        <ToolbarItem Type="ItemType.Button" 
                     PrefixIcon="e-icons e-italic" 
                     Text="Italic" 
                     ShowTextOn="DisplayMode.Overflow">
        </ToolbarItem>
    </ToolbarItems>
</SfToolbar>

This creates a compact icon-only toolbar while providing text labels in the popup for better understanding.

MultiRow Mode

In MultiRow mode, overflow items wrap to additional inline rows within the toolbar itself.

Features

• No popup or scrolling needed
• All items visible at once
• Toolbar height increases automatically
• Good for toolbars with logical groupings

Implementation

@using Syncfusion.Blazor.Navigations

<SfToolbar Width="380" OverflowMode="OverflowMode.MultiRow">
    <ToolbarItems>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-cut" Text="Cut"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-copy" Text="Copy"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-paste" Text="Paste"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-bold" Text="Bold"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-underline" Text="Underline"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-italic" Text="Italic"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-paint-bucket" Text="Color"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-erase" Text="Clear"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-refresh" Text="Reload"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-export" Text="Export"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

MultiRow Mode is Best For:

• Toolbars where all items should be immediately visible
• Applications with vertical space available
• Grouping related tools across multiple rows
• Touch interfaces where popups are inconvenient

Note: Items wrap naturally as toolbar width changes, creating a responsive layout.

Extended Mode

In Extended mode, overflow items are displayed in the next row below the toolbar.

Features

• Similar to MultiRow but with different layout
• Overflow items appear below primary row
• Creates distinct primary and secondary action areas
• Toolbar height increases when items overflow

Implementation

@using Syncfusion.Blazor.Navigations

<SfToolbar Width="380" OverflowMode="OverflowMode.Extended">
    <ToolbarItems>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-cut" Text="Cut"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-copy" Text="Copy"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-paste" Text="Paste"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-bold" Text="Bold"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-underline" Text="Underline"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-italic" Text="Italic"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-paint-bucket" Text="Color"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-erase" Text="Clear"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-refresh" Text="Reload"></ToolbarItem>
        <ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-export" Text="Export"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Extended Mode is Best For:

• Toolbars with clear primary/secondary action distinction
• Applications where vertical space is acceptable
• Maintaining visual separation between action groups
• Responsive designs that expand vertically

Difference from MultiRow: Extended mode typically creates a more distinct visual separation between primary and extended rows.

Choosing the Right Mode

Common Scenarios

Responsive Toolbar for All Devices

<SfToolbar Width="100%" OverflowMode="OverflowMode.Popup">
    <ToolbarItems>
        <!-- Primary actions: Always visible -->
        <ToolbarItem Text="New" 
                     PrefixIcon="e-icons e-plus" 
                     Overflow="OverflowOption.Show">
        </ToolbarItem>
        <ToolbarItem Text="Save" 
                     PrefixIcon="e-icons e-save" 
                     Overflow="OverflowOption.Show">
        </ToolbarItem>
        
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        
        <!-- Secondary actions: Overflow when needed -->
        <ToolbarItem Text="Export" ShowTextOn="DisplayMode.Overflow"></ToolbarItem>
        <ToolbarItem Text="Print" ShowTextOn="DisplayMode.Overflow"></ToolbarItem>
        <ToolbarItem Text="Settings" ShowTextOn="DisplayMode.Overflow"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Text Editor with Many Tools

<SfToolbar Width="900" OverflowMode="OverflowMode.Scrollable" ScrollStep="60">
    <ToolbarItems>
        <!-- File operations -->
        <ToolbarItem PrefixIcon="e-icons e-save" TooltipText="Save"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-folder-open" TooltipText="Open"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        
        <!-- Formatting -->
        <ToolbarItem PrefixIcon="e-icons e-bold" TooltipText="Bold"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-italic" TooltipText="Italic"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-underline" TooltipText="Underline"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        
        <!-- Alignment -->
        <ToolbarItem PrefixIcon="e-icons e-align-left" TooltipText="Left"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-align-center" TooltipText="Center"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-align-right" TooltipText="Right"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-justify" TooltipText="Justify"></ToolbarItem>
        <!-- More items... -->
    </ToolbarItems>
</SfToolbar>

Compact Mobile Toolbar

<SfToolbar Width="100%" OverflowMode="OverflowMode.Popup">
    <ToolbarItems>
        <ToolbarItem PrefixIcon="e-icons e-menu" 
                     Overflow="OverflowOption.Show" 
                     TooltipText="Menu">
        </ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="Action" 
                     Overflow="OverflowOption.Show">
        </ToolbarItem>
        
        <!-- Overflow items -->
        <ToolbarItem Text="Settings"></ToolbarItem>
        <ToolbarItem Text="Help"></ToolbarItem>
        <ToolbarItem Text="About"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Form Actions Toolbar

<SfToolbar Width="100%" OverflowMode="OverflowMode.Extended">
    <ToolbarItems>
        <ToolbarItem Text="Save" PrefixIcon="e-icons e-save" CssClass="primary"></ToolbarItem>
        <ToolbarItem Text="Save & Close" CssClass="primary"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Text="Cancel"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="Delete" CssClass="danger"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

Style and Appearance in Blazor Toolbar Component

Table of Contents

• Overview
• Customizing the Toolbar Container
• Customizing Toolbar Items
• Customizing Toolbar Buttons
• Customizing Item Icons
• Customizing Hover State
• Customizing Selected/Focus State
• Using Built-in Themes
• Right-to-Left (RTL) Support
• Complete Styling Examples
• CSS Class Reference
• Best Practices

Overview

The Toolbar component provides comprehensive styling options through CSS customization. You can modify the toolbar container, individual items, buttons, icons, and interaction states to match your application's design.

Customizing the Toolbar Container

Target the .e-toolbar class to customize the toolbar container itself.

Border and Background

.e-toolbar {
    border: 5px solid #4caf50;
    background-color: #f5f5f5;
    border-radius: 8px;
}

Shadow and Elevation

.e-toolbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    background-color: #ffffff;
}

Padding and Spacing

.e-toolbar {
    padding: 8px 16px;
    margin: 16px 0;
}

Complete Container Example

<SfToolbar CssClass="custom-toolbar">
    <ToolbarItems>
        <ToolbarItem Text="Cut"></ToolbarItem>
        <ToolbarItem Text="Copy"></ToolbarItem>
        <ToolbarItem Text="Paste"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

<style>
    .custom-toolbar.e-toolbar {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        border-radius: 12px;
        padding: 12px 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
</style>

Customizing Toolbar Items

Target the .e-toolbar-item class to style individual item containers.

Basic Item Styling

.e-toolbar .e-toolbar-item {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    margin: 0 4px;
    border-radius: 4px;
}

Item Spacing

.e-toolbar .e-toolbar-item {
    margin-right: 8px;
    padding: 4px;
}

.e-toolbar .e-toolbar-item:last-child {
    margin-right: 0;
}

Item-Specific Styling with CssClass

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Text="Primary" CssClass="primary-item"></ToolbarItem>
        <ToolbarItem Text="Secondary" CssClass="secondary-item"></ToolbarItem>
        <ToolbarItem Text="Danger" CssClass="danger-item"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

<style>
    .primary-item .e-tbar-btn {
        background-color: #2196f3;
        color: #ffffff;
    }
    
    .secondary-item .e-tbar-btn {
        background-color: #9e9e9e;
        color: #ffffff;
    }
    
    .danger-item .e-tbar-btn {
        background-color: #f44336;
        color: #ffffff;
    }
</style>

Customizing Toolbar Buttons

Target the .e-tbar-btn class to style the buttons within toolbar items.

Button Background and Text

.e-toolbar .e-tbar-btn {
    background: #2196f3;
    color: #ffffff;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 500;
}

Button Text Styling

.e-toolbar .e-tbar-btn .e-tbar-btn-text {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

Button with Icons

.e-toolbar .e-tbar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

.e-toolbar .e-tbar-btn .e-icons {
    font-size: 18px;
}

Customizing Item Icons

Target the .e-icons class to customize icons within toolbar items.

Icon Size and Color

.e-toolbar .e-tbar-btn .e-icons {
    font-size: 20px;
    color: #1976d2;
}

Icon Background

.e-toolbar .e-tbar-btn .e-icons {
    background: #e3f2fd;
    color: #1976d2;
    padding: 8px;
    border-radius: 50%;
}

Icon-Only Buttons

/* Style icon-only buttons */
.e-toolbar .e-tbar-btn:not(:has(.e-tbar-btn-text)) {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.e-toolbar .e-tbar-btn:not(:has(.e-tbar-btn-text)) .e-icons {
    font-size: 22px;
}

Customizing Hover State

Style the hover state to provide visual feedback when users hover over items.

Basic Hover

.e-toolbar .e-tbar-btn:hover {
    background: #1976d2;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

Hover with Icon Change

.e-toolbar .e-tbar-btn {
    transition: background-color 0.3s ease;
}

.e-toolbar .e-tbar-btn:hover {
    background-color: #e3f2fd;
}

.e-toolbar .e-tbar-btn:hover .e-icons {
    color: #2196f3;
}

Smooth Transitions

.e-toolbar .e-tbar-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.e-toolbar .e-tbar-btn:hover {
    background-color: #f5f5f5;
    border-radius: 8px;
}

Customizing Selected/Focus State

Style focused and active items for keyboard navigation and selection feedback.

Focus State

.e-toolbar .e-tbar-btn:focus {
    background: #e3f2fd;
    border: 2px solid #2196f3;
    outline: none;
}

Focus with Outline

.e-toolbar .e-tbar-btn:focus {
    outline: 3px solid #ffeb3b;
    outline-offset: 2px;
    background: #fff3e0;
}

Active/Pressed State

.e-toolbar .e-tbar-btn:active {
    background: #1565c0;
    transform: scale(0.95);
}

Selected State (for toggle buttons)

.e-toolbar .e-tbar-btn.e-active {
    background: #2196f3;
    color: #ffffff;
    font-weight: 600;
}

Using Built-in Themes

Syncfusion provides multiple built-in themes with consistent styling.

Available Themes

<!-- Bootstrap 5 theme (recommended) -->
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

<!-- Material theme -->
<link href="_content/Syncfusion.Blazor.Themes/material.css" rel="stylesheet" />

<!-- Fabric (Fluent) theme -->
<link href="_content/Syncfusion.Blazor.Themes/fabric.css" rel="stylesheet" />

<!-- Tailwind CSS theme -->
<link href="_content/Syncfusion.Blazor.Themes/tailwind.css" rel="stylesheet" />

<!-- Fluent theme -->
<link href="_content/Syncfusion.Blazor.Themes/fluent.css" rel="stylesheet" />

<!-- High Contrast theme -->
<link href="_content/Syncfusion.Blazor.Themes/highcontrast.css" rel="stylesheet" />

Theme Variants

Many themes have light and dark variants:

<!-- Bootstrap 5 Dark -->
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5-dark.css" rel="stylesheet" />

<!-- Material Dark -->
<link href="_content/Syncfusion.Blazor.Themes/material-dark.css" rel="stylesheet" />

<!-- Tailwind Dark -->
<link href="_content/Syncfusion.Blazor.Themes/tailwind-dark.css" rel="stylesheet" />

Customizing Built-in Themes

Override specific styles while keeping the theme base:

/* Override bootstrap5 theme colors */
.e-toolbar .e-tbar-btn {
    background-color: #6f42c1;  /* Purple instead of default blue */
}

.e-toolbar .e-tbar-btn:hover {
    background-color: #5a32a3;
}

Right-to-Left (RTL) Support

Enable RTL support for languages like Arabic, Hebrew, or Urdu using the EnableRtl property. This adjusts the toolbar layout and behavior for right-to-left reading direction.

Implementation

<SfToolbar EnableRtl="true">
    <ToolbarItems>
        <ToolbarItem Text="قص" TooltipText="قص"></ToolbarItem>
        <ToolbarItem Text="نسخ" TooltipText="نسخ"></ToolbarItem>
        <ToolbarItem Text="لصق" TooltipText="لصق"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Text="عريض" TooltipText="عريض"></ToolbarItem>
        <ToolbarItem Text="مائل" TooltipText="مائل"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

RTL Behavior

When EnableRtl="true":

• Toolbar items flow right-to-left
• Icons and text positions adjust automatically
• Scroll arrows reverse (left arrow becomes right)
• Popup opens from right side
• Arrow key navigation reverses (← goes forward, → goes back)
• Focus indicators adapt to RTL layout

Complete Styling Examples

Example 1: Modern Gradient Toolbar

<SfToolbar CssClass="gradient-toolbar">
    <ToolbarItems>
        <ToolbarItem Text="Home" PrefixIcon="e-icons e-home"></ToolbarItem>
        <ToolbarItem Text="Profile" PrefixIcon="e-icons e-user"></ToolbarItem>
        <ToolbarItem Text="Settings" PrefixIcon="e-icons e-settings"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem Text="Logout" PrefixIcon="e-icons e-logout"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

<style>
    .gradient-toolbar.e-toolbar {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        border-radius: 12px;
        padding: 12px 20px;
        box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
    }
    
    .gradient-toolbar .e-tbar-btn {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        border-radius: 8px;
        padding: 10px 16px;
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .gradient-toolbar .e-tbar-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    
    .gradient-toolbar .e-tbar-btn .e-icons {
        color: #ffffff;
        font-size: 18px;
    }
</style>

Example 2: Minimal Flat Design

<SfToolbar CssClass="flat-toolbar">
    <ToolbarItems>
        <ToolbarItem Text="Cut" PrefixIcon="e-icons e-cut"></ToolbarItem>
        <ToolbarItem Text="Copy" PrefixIcon="e-icons e-copy"></ToolbarItem>
        <ToolbarItem Text="Paste" PrefixIcon="e-icons e-paste"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Text="Bold" PrefixIcon="e-icons e-bold"></ToolbarItem>
        <ToolbarItem Text="Italic" PrefixIcon="e-icons e-italic"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

<style>
    .flat-toolbar.e-toolbar {
        background: #ffffff;
        border: none;
        border-bottom: 1px solid #e0e0e0;
        padding: 8px 16px;
    }
    
    .flat-toolbar .e-tbar-btn {
        background: transparent;
        color: #424242;
        border: none;
        border-radius: 4px;
        padding: 8px 12px;
        transition: background-color 0.2s ease;
    }
    
    .flat-toolbar .e-tbar-btn:hover {
        background: #f5f5f5;
    }
    
    .flat-toolbar .e-tbar-btn:focus {
        background: #eeeeee;
        outline: 2px solid #2196f3;
        outline-offset: 2px;
    }
    
    .flat-toolbar .e-tbar-btn .e-icons {
        color: #757575;
        font-size: 16px;
    }
</style>

Example 3: Dark Mode Toolbar

<SfToolbar CssClass="dark-toolbar">
    <ToolbarItems>
        <ToolbarItem Text="Dashboard" PrefixIcon="e-icons e-dashboard"></ToolbarItem>
        <ToolbarItem Text="Analytics" PrefixIcon="e-icons e-chart"></ToolbarItem>
        <ToolbarItem Text="Reports" PrefixIcon="e-icons e-file"></ToolbarItem>
        <ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-bell" TooltipText="Notifications"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-user" TooltipText="Profile"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

<style>
    .dark-toolbar.e-toolbar {
        background: #1e1e1e;
        border: 1px solid #333333;
        padding: 12px 20px;
    }
    
    .dark-toolbar .e-tbar-btn {
        background: transparent;
        color: #e0e0e0;
        border-radius: 6px;
        padding: 10px 16px;
        transition: all 0.2s ease;
    }
    
    .dark-toolbar .e-tbar-btn:hover {
        background: #2d2d2d;
        color: #ffffff;
    }
    
    .dark-toolbar .e-tbar-btn:focus {
        background: #3d3d3d;
        outline: 2px solid #64b5f6;
        outline-offset: 2px;
    }
    
    .dark-toolbar .e-tbar-btn .e-icons {
        color: #b0b0b0;
    }
    
    .dark-toolbar .e-tbar-btn:hover .e-icons {
        color: #ffffff;
    }
    
    .dark-toolbar .e-separator {
        background: #424242;
    }
</style>

Example 4: Colorful Icon Toolbar

<SfToolbar CssClass="icon-toolbar">
    <ToolbarItems>
        <ToolbarItem PrefixIcon="e-icons e-cut" TooltipText="Cut" CssClass="cut-item"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-copy" TooltipText="Copy" CssClass="copy-item"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-paste" TooltipText="Paste" CssClass="paste-item"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-bold" TooltipText="Bold" CssClass="bold-item"></ToolbarItem>
        <ToolbarItem PrefixIcon="e-icons e-italic" TooltipText="Italic" CssClass="italic-item"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

<style>
    .icon-toolbar.e-toolbar {
        background: #fafafa;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 12px;
    }
    
    .icon-toolbar .e-tbar-btn {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        transition: all 0.2s ease;
        background: transparent;
    }
    
    .icon-toolbar .e-tbar-btn:hover {
        transform: scale(1.1);
    }
    
    .cut-item .e-tbar-btn { background: #ffebee; }
    .cut-item .e-icons { color: #d32f2f; }
    
    .copy-item .e-tbar-btn { background: #e3f2fd; }
    .copy-item .e-icons { color: #1976d2; }
    
    .paste-item .e-tbar-btn { background: #e8f5e9; }
    .paste-item .e-icons { color: #388e3c; }
    
    .bold-item .e-tbar-btn { background: #fff3e0; }
    .bold-item .e-icons { color: #f57c00; }
    
    .italic-item .e-tbar-btn { background: #f3e5f5; }
    .italic-item .e-icons { color: #7b1fa2; }
</style>

CSS Class Reference

Primary Classes

State Classes

Overflow Classes

Best Practices

Do:

✅ Use CSS custom properties for consistent theming:

:root {
    --toolbar-bg: #ffffff;
    --toolbar-text: #212121;
    --toolbar-hover: #f5f5f5;
    --toolbar-active: #2196f3;
}

.e-toolbar {
    background: var(--toolbar-bg);
    color: var(--toolbar-text);
}

.e-tbar-btn:hover {
    background: var(--toolbar-hover);
}

✅ Maintain accessibility with sufficient contrast:

/* Good contrast ratios */
.e-toolbar .e-tbar-btn {
    background: #2196f3;  /* Blue */
    color: #ffffff;        /* White */
    /* Contrast ratio: 4.5:1+ */
}

✅ Use transitions for smooth interactions:

.e-tbar-btn {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

✅ Test styling with different themes and screen sizes

Don't:

❌ Remove focus indicators (accessibility issue):

/* Bad: Removes keyboard focus indicator */
.e-tbar-btn:focus {
    outline: none;  /* Don't do this without alternative */
}

❌ Use very low contrast colors:

/* Bad: Low contrast */
.e-toolbar {
    background: #f0f0f0;
    color: #e0e0e0;  /* Too similar, hard to read */
}

❌ Override all theme styles (breaks consistency):

/* Bad: Overriding everything */
.e-toolbar * {
    all: unset;  /* Breaks component functionality */
}

❌ Use inline styles instead of CSS classes:

<!-- Bad: Inline styles -->
<ToolbarItem Text="Save" HtmlAttributes="@(new Dictionary<string, object> { { "style", "color: red" } })"></ToolbarItem>

<!-- Good: Use CssClass -->
<ToolbarItem Text="Save" CssClass="danger-button"></ToolbarItem>

Performance Tips

• Use CSS classes instead of inline styles
• Minimize use of complex selectors
• Avoid !important unless absolutely necessary
• Use CSS custom properties for easy theme switching
• Test performance with many toolbar items