Getting Started with Blazor Toolbar Component
10 Oct 20255 minutes to read
This section explains how to integrate the Syncfusion Blazor Toolbar component into a Blazor WebAssembly App using Visual Studio and Visual Studio Code.
For a quick start with the Blazor Toolbar component, check this video or the GitHub sample.
Prerequisites
Create a new Blazor App in Visual Studio
A Blazor WebAssembly App can be created using Visual Studio via Microsoft Templates or the Syncfusion® Blazor Extension.
Install Syncfusion® Blazor Navigations and Themes NuGet in the App
To add Blazor Toolbar component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install Syncfusion.Blazor.Navigations and Syncfusion.Blazor.Themes. Alternatively, you can utilize the following package manager command to achieve the same.
Install-Package Syncfusion.Blazor.Navigations -Version 31.2.2
Install-Package Syncfusion.Blazor.Themes -Version 31.2.2
NOTE
Syncfusion® Blazor components are available in nuget.org. Refer to NuGet packages topic for available NuGet packages list with component details.
Prerequisites
Create a new Blazor App in Visual Studio Code
A Blazor WebAssembly App can be created using Visual Studio Code via Microsoft Templates or the Syncfusion® Blazor Extension.
Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`):
dotnet new blazorwasm -o BlazorApp
cd BlazorApp
Install Syncfusion® Blazor Navigations 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 command to install a Syncfusion.Blazor.Navigations and Syncfusion.Blazor.Themes NuGet package and ensure all dependencies are installed.
dotnet add package Syncfusion.Blazor.Navigations -v 31.2.2
dotnet add package Syncfusion.Blazor.Themes -v 31.2.2
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
Open ~/_Imports.razor file and import the Syncfusion.Blazor
and Syncfusion.Blazor.Navigations
namespace.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Navigations
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
Review the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in a Blazor application. Also, review the Adding Script Reference topic for different approaches to adding script references in a Blazor application.
Add Blazor Toolbar component
Add the Syncfusion® Blazor Toolbar component in the ~/Pages/Index.razor file.
<SfToolbar>
<ToolbarItems>
<ToolbarItem Text="Cut"></ToolbarItem>
<ToolbarItem Text="Copy"></ToolbarItem>
<ToolbarItem Text="Paste"></ToolbarItem>
//To separate the Toolbar items
<ToolbarItem></ToolbarItem>
<ToolbarItem Text="Bold"></ToolbarItem>
<ToolbarItem Text="Underline"></ToolbarItem>
<ToolbarItem Text="Italic"></ToolbarItem>
<ToolbarItem Text="Color-Picker"></ToolbarItem>
</ToolbarItems>
</SfToolbar>
- Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Toolbar component in your default web browser.

See Also
- Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI
- Getting Started with Syncfusion® Blazor for client-side in Visual Studio
- Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI
NOTE
Explore the Blazor Toolbar example for demonstrations on how to render and configure the toolbar.