Getting Started with Blazor SpeedDial Component

4 Nov 20257 minutes to read

This section explains how to add the Blazor SpeedDial component to a Blazor WebAssembly application using Visual Studio or Visual Studio Code.

To get start quickly with SpeedDial Component using Blazor, you can check on this video or GitHub sample.

Prerequisites

Create a new Blazor App in Visual Studio

Create a Blazor WebAssembly app using either the Microsoft templates or the Syncfusion® Blazor Extension.

Install Syncfusion® Blazor Buttons and Themes NuGet in the App

To add the Blazor SpeedDial component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install Syncfusion.Blazor.Buttons and Syncfusion.Blazor.Themes. Alternatively, run the following Package Manager commands.

Install-Package Syncfusion.Blazor.Buttons -Version 31.2.12
Install-Package Syncfusion.Blazor.Themes -Version 31.2.12

NOTE

Syncfusion® Blazor components are available on nuget.org. Refer to the NuGet packages topic for the list of available packages and component details.

Prerequisites

Create a new Blazor App in Visual Studio Code

Create a Blazor WebAssembly app using either the Microsoft templates or the Syncfusion® Blazor Extension.

Alternatively, create a WebAssembly application using the following commands in the integrated terminal (Ctrl+`).

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Install Syncfusion® Blazor Buttons and Themes NuGet in the App

  • Press Ctrl+` to open the integrated terminal in Visual Studio Code.
  • Ensure the current directory is the project root where the .csproj file is located.
  • Run the following commands to install the Syncfusion.Blazor.Buttons and Syncfusion.Blazor.Themes packages and restore dependencies.
dotnet add package Syncfusion.Blazor.Buttons -v 31.2.12
dotnet add package Syncfusion.Blazor.Themes -v 31.2.12
dotnet restore

NOTE

Syncfusion® Blazor components are available on nuget.org. Refer to the NuGet packages topic for the list of available packages and component details.

Register Syncfusion® Blazor Service

Open ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.Buttons namespace.

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

Now, register the Syncfusion® Blazor Service in the ~/Program.cs file of your Blazor WebAssembly App.

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
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) });

builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();
....

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and script references in the <head> section of the ~/index.html file.

<head>
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

NOTE

Refer to the Blazor Themes topic to learn multiple methods to reference themes in a Blazor application, including Static Web Assets, CDN, and CRG. For script references, see Adding Script Reference. The example below uses the bootstrap5 theme, which also provides the e-icons set used by SpeedDial.

Add Blazor SpeedDial component

Add the Syncfusion® Blazor SpeedDial component in the ~/Pages/Index.razor file.

@using Syncfusion.Blazor.Buttons

<div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
    <SfSpeedDial Target="#target" Content="Edit">
        <SpeedDialItems>
            <SpeedDialItem Text="Cut"/>
            <SpeedDialItem Text="Copy"/>
            <SpeedDialItem Text="Paste"/>
        </SpeedDialItems>
    </SfSpeedDial>
</div>
  • Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The Syncfusion® Blazor SpeedDial component will render in the default web browser.
Blazor SpeedDial Component

Linear and radial display modes

Use the Mode property to display action items either in a linear list or as a radial (circular) menu.

<div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
    <SfSpeedDial Target="#target" Position="FabPosition.BottomLeft" Mode="SpeedDialMode.Radial" OpenIconCss="e-icons e-edit">
        <SpeedDialRadialSettings OffSet="80px"/>
        <SpeedDialItems>
            <SpeedDialItem IconCss="e-icons e-cut"/>
            <SpeedDialItem IconCss="e-icons e-copy"/>
            <SpeedDialItem IconCss="e-icons e-paste"/>
        </SpeedDialItems>
    </SfSpeedDial>
    <SfSpeedDial Target="#target" Position="FabPosition.BottomRight" Mode="SpeedDialMode.Linear" OpenIconCss="e-icons e-edit">
        <SpeedDialItems>
            <SpeedDialItem IconCss="e-icons e-cut" Text="Cut"/>
            <SpeedDialItem IconCss="e-icons e-copy" Text="Copy"/>
            <SpeedDialItem IconCss="e-icons e-paste" Text="Paste"/>
        </SpeedDialItems>
    </SfSpeedDial>
</div>
![Blazor SpeedDial Component

Item clicked event

The SpeedDial control triggers the ItemClicked event with SpeedDialItemEventArgs when an action item is clicked. Use this event to perform the required action.

<div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
    <SfSpeedDial Target="#target" OpenIconCss="e-icons e-edit" ItemClicked="ItemEventClick">
        <SpeedDialItems>
            <SpeedDialItem IconCss="e-icons e-cut" Text="Cut"/>
            <SpeedDialItem IconCss="e-icons e-copy" Text="Copy"/>
            <SpeedDialItem IconCss="e-icons e-paste" Text="Paste"/>
        </SpeedDialItems>
    </SfSpeedDial>
</div>

@code{
    public void ItemEventClick(SpeedDialItemEventArgs args)
    {
        // Here, you can call your desired action.
    }
}
Blazor SpeedDial Component

NOTE

Explore the Blazor Speed Dial Button example that shows how to render and configure the button.