Getting Started with Blazor SpeedDial in Blazor Web App

4 Nov 202510 minutes to read

This section explains how to add the Blazor Speed Dial component to a Blazor Web App using Visual Studio or Visual Studio Code.

Prerequisites

System requirements for Blazor components

Create a new Blazor Web App in Visual Studio

Create a Blazor Web App using Visual Studio 2022 via Microsoft templates or the Syncfusion Blazor extension.

Configure the appropriate interactive render mode and interactivity location when creating the Blazor Web App.

Install Syncfusion^® Blazor Buttons and Themes NuGet in the App

To add the Blazor Speed Dial component to the app, open the 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.

If you use the WebAssembly or Auto render modes in the Blazor Web App, you need to install the Syncfusion Blazor NuGet packages in the client project.

Alternatively, use the following Package Manager commands:

Package Manager
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. For the full list of available packages, see NuGet packages.

Prerequisites

System requirements for Blazor components

Create a new Blazor Web App in Visual Studio Code

Create a Blazor Web App using Visual Studio Code via Microsoft templates or the Syncfusion Blazor extension.

Configure the appropriate interactive render mode and interactivity location when creating the Blazor Web App.

For example, in a Blazor Web App with the Auto interactive render mode, run the following commands:

Blazor Web App
dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.Client

NOTE

For more information on creating a Blazor Web App with various interactive modes and locations, see Blazor Web App interactive modes and locations.

Install Syncfusion^® Blazor Buttons and Themes NuGet in the App

If utilize WebAssembly or Auto render modes in the Blazor Web App need to be install Syncfusion^® Blazor components NuGet packages within the client project.

Press Ctrl+` to open the integrated terminal in Visual Studio Code.
Ensure you’re in the project root directory where your .csproj file is located.
Run the following command to install a Syncfusion.Blazor.Buttons and Syncfusion.Blazor.Themes NuGet package and ensure all dependencies are installed.

Package Manager
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 in nuget.org. Refer to NuGet packages topic for available NuGet packages list with component details.

Register Syncfusion^® Blazor Service

Interactive Render Mode	Description
WebAssembly or Auto	Open ~/_Imports.razor from the client project.
Server	Open ~/_Imports.razor (typically in the Components folder).

Import the Syncfusion.Blazor and Syncfusion.Blazor.Buttons namespaces.

~/_Imports.razor
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Buttons

Now register the Syncfusion Blazor service in the ~/Program.cs file of the Blazor Web App.

If the interactive render mode is set to WebAssembly or Auto, register the Syncfusion Blazor service in both ~/Program.cs files (server and client) of the Blazor Web App.

Server(~/_Program.cs)
Client(~/_Program.cs)
...
...
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();
....
...
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddSyncfusionBlazor();

await builder.Build().RunAsync();

If the Interactive Render Mode is set to Server, your project will contain a single ~/Program.cs file. So, you should register the Syncfusion^® Blazor Service only in that ~/Program.cs file.

~/_Program.cs
...
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();
....

Add stylesheet and script resources

The theme stylesheet and script are provided via NuGet as static web assets. Add the stylesheet reference in the head and the script reference at the end of the body in ~/Components/App.razor as shown below. The script enables client-side interactivity for Syncfusion components.

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

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

NOTE

Check out the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in your Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in your Blazor application.

Add Syncfusion^® Blazor SpeedDial component

Add the Syncfusion^® Blazor SpeedDial component in the ~Pages/.razor file. If an interactivity location as Per page/component in the web app, define a render mode at the top of the ~Pages/.razor component, as follows:

Interactivity location	RenderMode	Code
Per page/component	Auto	@rendermode InteractiveAuto
	WebAssembly	@rendermode InteractiveWebAssembly
	Server	@rendermode InteractiveServer
	None	—

NOTE

If the interactivity location is set to Global and the render mode is Auto, WebAssembly, or Server, the render mode is configured in the App.razor file by default.

RAZOR

@* desired render mode define here *@
@rendermode InteractiveAuto

RAZOR
<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 launch the application. This will render the Syncfusion^® Blazor SpeedDial component in your default web browser.

NOTE

View Sample in GitHub.

Linear and radial display modes

You can use the Mode property to either display the menu in linear order like a list or like a radial menu in radial (circular) direction.

RAZOR
<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>

Item clicked event

The speed dial control triggers the ItemClicked event with SpeedDialItemEventArgs argument when an action item is clicked. You can use this event to perform the required action.

RAZOR
<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.
    }
}

NOTE

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

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Getting Started with Blazor SpeedDial in Blazor Web App

Prerequisites

Create a new Blazor Web App in Visual Studio

Install Syncfusion^® Blazor Buttons and Themes NuGet in the App

Prerequisites

Create a new Blazor Web App in Visual Studio Code

Install Syncfusion^® Blazor Buttons and Themes NuGet in the App

Register Syncfusion^® Blazor Service

Add stylesheet and script resources

Add Syncfusion^® Blazor SpeedDial component

Linear and radial display modes

Item clicked event

Getting Started with Blazor SpeedDial in Blazor Web App

Prerequisites

Create a new Blazor Web App in Visual Studio

Install Syncfusion® Blazor Buttons and Themes NuGet in the App

Prerequisites

Create a new Blazor Web App in Visual Studio Code

Install Syncfusion® Blazor Buttons and Themes NuGet in the App

Register Syncfusion® Blazor Service

Add stylesheet and script resources

Add Syncfusion® Blazor SpeedDial component

Linear and radial display modes

Item clicked event

Install Syncfusion^® Blazor Buttons and Themes NuGet in the App

Install Syncfusion^® Blazor Buttons and Themes NuGet in the App

Register Syncfusion^® Blazor Service

Add Syncfusion^® Blazor SpeedDial component