Getting Started with Blazor Split Button in Blazor Web App

4 Nov 20257 minutes to read

This section briefly explains about how to include Blazor Split Button component in Blazor Web App using Visual Studio and Visual Studio Code.

Prerequisites

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 corresponding Interactive render mode and Interactivity location while creating a Blazor Web Application.

Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App

To add the Blazor Split Button 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.SplitButtons and Syncfusion.Blazor.Themes.

If using WebAssembly or Auto render modes in a Blazor Web App, install the Syncfusion Blazor NuGet packages in the Client project.

Alternatively, run the following commands in the Package Manager Console:

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

NOTE

Syncfusion® Blazor components are available on NuGet. For a list of available packages, see NuGet packages.

Prerequisites

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 corresponding Interactive render mode and Interactivity location while creating a Blazor Web Application.

For example, to create a Blazor Web App with the Auto interactive render mode, use the following commands:

dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.Client

NOTE

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

Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App

If using WebAssembly or Auto render modes in a Blazor Web App, install the Syncfusion Blazor NuGet packages in the Client project.

  • Press Ctrl+` to open the integrated terminal in Visual Studio Code.
  • Ensure the terminal is opened in the project directory that contains the .csproj file.
  • Run the following commands to install Syncfusion.Blazor.SplitButtons and Syncfusion.Blazor.Themes and restore dependencies.
dotnet add package Syncfusion.Blazor.SplitButtons -v 31.2.12
dotnet add package Syncfusion.Blazor.Themes -v 31.2.12
dotnet restore

NOTE

Syncfusion® Blazor components are available on NuGet. For a list of available packages, see NuGet packages.

Register Syncfusion® Blazor Service

Interactive render mode Description
WebAssembly or Auto Open ~/_Imports.razor in the Client project.
Server Open ~/_Imports.razor in the Server project (located in the Components folder).

Import the Syncfusion.Blazor and Syncfusion.Blazor.SplitButtons namespaces.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SplitButtons

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

If the Interactive render mode is WebAssembly or Auto, register Syncfusion Blazor services in both ~/Program.cs files (Server and Client) of the Blazor Web App.

...
...
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 Server, the project contains a single ~/Program.cs file. In this case, register the Syncfusion® Blazor Service only in that ~/Program.cs file.

...
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 can be referenced from NuGet via Static Web Assets. Add the theme stylesheet in the <head> and the script reference at the end of the <body> in ~/Components/App.razor as shown:

<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

For additional options, see Blazor Themes to reference themes using Static Web Assets, CDN, or CRG. For script reference approaches, see Adding script references.

Add Syncfusion® Blazor Split Button component

Add the Syncfusion® Blazor Split Button component in the ~Pages/.razor file. If the 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 Global and the Render Mode is Auto or WebAssembly or Server, the render mode is configured in App.razor file by default.

@* desired render mode define here *@
@rendermode InteractiveAuto
<SfSplitButton Content="Paste">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Cut" ></DropDownMenuItem>
        <DropDownMenuItem Text="Copy" ></DropDownMenuItem>
        <DropDownMenuItem Text="Paste"></DropDownMenuItem>
    </DropDownMenuItems>
</SfSplitButton>
  • Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Split Button component will render in the default web browser.
Blazor Split Button Component

NOTE

View Sample in GitHub.

See Also

NOTE

Also explore the Blazor Split Button example for rendering and configuration options.