syncfusion-blazor-toolbar

What this skill does

# 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](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](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](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](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](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](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:

```razor
@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:

```razor
<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:

```razor
<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:

```razor
<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:

```razor
<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

| Property | Type | Description |
|----------|------|-------------|
| `Width` | string | Sets the toolbar width (e.g., "600px", "100%") |
| `Height` | string