Introducing New Blazor Speed Dial Component
Tags: blazor, webdev, csharp, dotnet
Published: 2022-10-18 13:41:36

---
title: Introducing New Blazor Speed Dial Component
published: true
date: 2022-10-17 11:03:03 UTC
tags: blazor, webdev, csharp, dotnet
canonical_url: https://www.syncfusion.com/blogs/post/blazor-speed-dial-component.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blx3nq6x4rx54nim7ddb.png
---

The [Blazor Speed Dial](https://www.syncfusion.com/blazor-components/blazor-speeddial "Blazor Speed Dial component") component is an extended version of the [Blazor Floating Action Button (FAB)](https://www.syncfusion.com/blazor-components/blazor-fab "Blazor Floating Action Button") component. It displays multiple, related action buttons when clicked. It appears on top of the other webpage content, like the Floating Action Button. The component is useful when performing more than one primary action on a webpage is required.

In this blog, you will learn about the key features of the new Syncfusion Blazor Speed Dial component and the procedure to get started using this component in a Blazor application.

## Key features of Blazor Speed Dial

The key features of the component:

- [Built-in support to place the control in different positions.](#built-in-support-to-place-the-control-in-different-positions)
- [Predefined styles for Speed Dial buttons.](#predefined-styles-for-speed-dial-buttons)
- [Linear and radial display mode support for action items.](#linear-and-radial-display-mode-support-for-action-items)
- [Icon and template customization.](#icon-and-template-customization)
- [WAI-ARIA compliance and keyboard accessibility.](#wai-aria-compliance-and-keyboard-accessibility)

### <a name="built-in-support-to-place-the-control-in-different-positions">Built-in support to place the control in different positions</a>

The Blazor Speed Dial component provides different built-in positions. If a target is not specified, Speed Dial is positioned based on the browser viewport.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Different-positions-of-Blazor-Speed-Dial-component.png" alt="Different positions of Blazor Speed Dial component" style="width:100%">

  <figcaption>Different positions of Blazor Speed Dial component</figcaption>

</figure>

**Note:** For more information, refer to the [Blazor Speed Dial Position demo](https://blazor.syncfusion.com/demos/speeddial/position?theme=fluent "Blazor Speed Dial Position demo").

### <a name="predefined-styles-for-speed-dial-buttons">Predefined styles for Speed Dial button</a>

Several predefined styles are available:

- Primary
- Success
- Info
- Warning
- Danger
 
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Predefined-styles-of-Speed-Dial-buttons.png" alt="Predefined styles of Speed Dial buttons" style="width:100%">

  <figcaption>Predefined styles of Speed Dial buttons</figcaption>

</figure>

### <a name="linear-and-radial-display-mode-support-for-action-items">Linear and radial display modes for action items</a>

The Blazor Speed Dial component supports linear and radial display modes for displaying the action items.

#### Linear

Action items are displayed in a list-like format, either horizontally or vertically, in linear mode. Based on the direction property, we can open the action items on the top, bottom, left, or right side of the main button. For auto positioning, the action items are displayed based on the position of the Speed Dial. Action items are shown as a horizontal list for the left and right sides and a vertical list at the top and bottom.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Linear-display-mode-support-for-action-items-2.gif" alt="Linear display mode support for action items" style="width:100%">

  <figcaption>Linear display mode support for action items</figcaption>

</figure>


#### Radial

In radial mode, action items are displayed in a circular pattern like a radial menu. The start and end angles for radial arrangement are auto-calculated based on position when the start and end angles are not specified.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Radial-display-mode-support-for-action-items-2.gif" alt="Radial display mode support for action items" style="width:100%">

  <figcaption>Radial display mode support for action items</figcaption>

</figure>

**Note:** For more details, refer to the [Blazor Speed Dial Radial Menu demo](https://blazor.syncfusion.com/demos/speeddial/radialmenu?theme=fluent "Blazor Speed Dial Radial Menu demo").

### <a name="icon-and-template-customization">Icon and action items customization</a>

You can easily customize the Speed Dial button and action buttons as:

- Text only.
- Icon with text.
- Icon only.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Icon-and-action-items-customization-2.gif" alt="Icon and action items customization" style="width:100%">

  <figcaption>Icon and action items customization in Balzor Speed Dial</figcaption>

</figure>

**Note:** For more details, refer to the [Blazor Speed Dial Icon Customization demo](https://blazor.syncfusion.com/demos/speeddial/styles?theme=fluent "Blazor Speed Dial Icon Customization demo").

### Template customization

Customize the action buttons and the entire pop-up of the speed dial using templates.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Template-customization-2.gif" alt="Template customization" style="width:100%">

  <figcaption>Template customization in Blazor Speed Dial control</figcaption>

</figure>

**Note:** For more details, refer to [Blazor Speed Dial Template Customization demo](https://blazor.syncfusion.com/demos/speeddial/template?theme=fluent "Blazor Speed Dial Template Customization demo").

### <a name="wai-aria-compliance-and-keyboard-accessibility">WAI-ARIA compliance and keyboard accessibility</a>

We have designed the Speed Dial component based on [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/ "ARIA Authoring Practices Guide (APG) Home Page") specifications, applying WAI-ARIA roles, states, properties, and keyboard support for people who use assistive devices.

You can easily interact with the Blazor Speed Dial component using the following keyboard shortcuts, too.
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 49.7167%;" width="129"><strong>Key</strong></td>
<td style="width: 50.2833%;"><strong>Functionality</strong></td>
</tr>
<tr>
<td style="width: 49.7167%;" width="129">Arrow keys</td>
<td style="width: 50.2833%;" width="329">Navigate among the action items.</td>
</tr>
<tr>
<td style="text-align: left; width: 49.7167%;" width="129">Home</td>
<td style="width: 50.2833%;" width="329">Navigate to the first action item.</td>
</tr>
<tr>
<td style="width: 49.7167%;" width="129">End</td>
<td style="width: 50.2833%;" width="329">Navigate to the last action item.</td>
</tr>
<tr>
<td style="width: 49.7167%;" width="129">Enter</td>
<td style="width: 50.2833%;" width="329">Opens and closes the action items.

Triggers item click when an action item is focused.</td>
</tr>
</tbody>
</table>

## Getting started with Blazor Speed Dial component

Let’s see the steps to configure the Blazor Speed Dial component in Blazor Server and WebAssembly apps.

### Step 1: Create Blazor Server or Blazor WebAssembly app

1. Ensure all [prerequisites](https://blazor.syncfusion.com/documentation/system-requirements "System requirements for Blazor Components") needed to run the Blazor app are installed.
2. Create a  **Blazor Server app** or  **Blazor WebAssembly app**  using Visual Studio in one of the following:
  1. [Create a Project using Microsoft Templates](https://docs.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=windows "Tooling for ASP.NET Core Blazor Article")
  2. [Create a Project using Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project "Creating a Syncfusion Blazor application Documentation")

### Step 2: Add the Blazor Speed Dial NuGet reference.

Syncfusion Blazor components are available at [NuGet Gallery](https://www.nuget.org/packages?q=syncfusion.blazor "Syncfusion Blazor NuGet packages"). To use Syncfusion Blazor components in an application, add a reference to the corresponding package. Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages "NuGet Packages for Syncfusion Blazor UI components Documentation") for the available NuGet packages list with component details and the [benefits of using individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages#benefits-of-using-individual-nuget-packages "Benefits of using individual NuGet packages").

To add the Blazor Speed Dial component to your app, open the NuGet package manager in Visual Studio (_ **Tools → NuGet Package Manager → Manage NuGet Packages for Solution** _), and search for [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons "Syncfusion.Blazor.Buttons NuGet package"), and then install it.

### Step 3: Register Syncfusion Blazor Service.

Open the  **~/\_Imports.razor**  file and import the **Syncfusion.Blazor** namespace. Then:

- For a Blazor Server app, register the Syncfusion Blazor Service in the  **~/Program.cs ** file for .NET 6 & above and in the  **~/Startup.cs**  file for **.NET 5 and .NET 3.X ** projects.
- For a Blazor WASM app, open the  **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app.

**Blazor Server App (.NET 6)**

```csharp
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSyncfusionBlazor();

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

**Blazor Web Assembly App (.NET 6)**

```csharp
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(serviceProvider => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

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

### **Step 4:** Add style sheet and script references.

To add a theme to the app, open the NuGet package manager in Visual Studio (_ **Tools → NuGet Package Manager → Manage NuGet Packages for Solution** _), and search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/ "Syncfusion.Blazor.Themes NuGet package"), and then install it. Then, you can refer the theme style sheet from NuGet as follows:

- For a Blazor WASM app, reference scripts in the _ **~/wwwroot/index.html file** _.
- For a Blazor Server app, reference scripts in the_ ** ~/Pages/\_Layout.cshtml** _ file for a . **_NET 6_**  project and in the _ **~/Pages/\_Host.cshtml** _ file for a _ **.NET 5 or .NET Core 3.X** _ project.

```xml
<head>
    ...
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <!--Reference theme style sheet as below if you are using Syncfusion.Blazor Single NuGet-->
    <!--<link href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" />-->
</head>
```

### **Step 5:** Add script reference.

Check out [this documentation](https://blazor.syncfusion.com/documentation/common/adding-script-references "Reference scripts in Blazor application documentation") to learn different ways to add script references in a Blazor application. In this getting started walk-through, the required scripts are referenced using [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets "Static web assets in Blazor documentation") externally inside the <head>:

- For a Blazor WASM app, reference scripts in the _ **~/wwwroot/index.html** _ file.
- For a Blazor Server app, reference scripts in the  **_~/Pages/\_Layout.cshtml_**  file for _ **.NET 6** _ project and in _ **~/Pages/\_Host.cshtml** _ file for ._ **NET 5** and **.NET Core 3.X** _ project.

```xml
<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>
    <!--Use below script reference if you are using Syncfusion.Blazor Single NuGet-->
    <!--<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>-->
</head>
```

### **Step 6:** Add Blazor Speed Dial component.

Add the Syncfusion Blazor Speed Dial component in the Razor file with its items.

```js
@using Syncfusion.Blazor.Buttons

<div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
    <SfSpeedDial Target="#target" OpenIconCss="e-icons e-edit" Position=FabPosition.BottomLeft ItemClicked="clicked" Mode=SpeedDialMode.Radial>        
        <SpeedDialItems>
            <SpeedDialItem ID="cut" IconCss="e-icons e-cut" />
            <SpeedDialItem ID="copy" IconCss="e-icons e-copy" />
            <SpeedDialItem ID="paste" IconCss="e-icons e-paste" />
        </SpeedDialItems>
    </SfSpeedDial>
</div>

@code {
    private void clicked(SpeedDialItemEventArgs args)
    {
        switch(args.Item.ID) {
            case "cut":
                //Perform Cut action.
                break;
            case "copy":
                //Perform Copy action.
                break;
            case "paste":
                //Perform Paste action.
                break;
        }
    }
}
```

You can customize the Speed Dial position using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Position "Position property of Blazor SpeedDial component") property and the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Mode "Mode property of Blazor SpeedDial component") property to display the menu in linear order like a list or a radial menu in a circular pattern. Also, the Speed Dial control triggers the [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemClicked "ItemClicked property of Blazor SpeedDial component") event with the [SpeedDialItemEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html "SpeedDialItemEventArgs Class of Blazor SpeedDial component") argument when an action item is clicked. You can use this event to perform the required action.

## Conclusion

I hope you enjoyed learning about the new Syncfusion [Blazor Speed Dial](https://www.syncfusion.com/blazor-components/blazor-speeddial "Blazor Speed Dial component") component and its features. This control is available in our [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3") release. Check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v20.3.0.47 "Syncfusion Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Syncfusion What's New") pages to discover all the new updates in this release. Try them out and share your thoughts in the comments section below!

For current customers, the new version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out our newest features.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2022 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-3-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 3 Is Here!")
- [Deploying a Blazor Server-Side Application to Azure App Service Using GitHub Actions](https://www.syncfusion.com/blogs/post/deploying-blazor-server-application-to-azure-app-service-using-github-actions.aspx "Blog: Deploying a Blazor Server-Side Application to Azure App Service Using GitHub Actions")
- [Simple Steps to Integrate a Blazor WebAssembly Project with an Existing ASP.NET Core Application](https://www.syncfusion.com/blogs/post/integrate-blazor-webassembly-in-asp-net-core-application.aspx "Blog: Simple Steps to Integrate a Blazor WebAssembly Project with an Existing ASP.NET Core Application")
- [A Full-Stack Web App Using Blazor WebAssembly and GraphQL: Part 6](https://www.syncfusion.com/blogs/post/a-full-stack-web-app-using-blazor-webassembly-and-graphql-part-6.aspx "Blog: A Full-Stack Web App Using Blazor WebAssembly and GraphQL")