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.
Blazor Toolbar Component

See Also

  1. Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI
  2. Getting Started with Syncfusion® Blazor for client-side in Visual Studio
  3. 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.