Getting Started with Fluent UI Blazor Application

What is Fluent UI?

• Fluent is a design framework and implemented as a set of UI Components
• We can create a web application with a consistent and improved UI
• Aligned with Microsoft’s design guidelines
• Fluent UI provides a collection of reusables, customizable, and responsive UI components

Getting started with the implementation:

You can create a Blazor App with Fluent UI template using the below commands

dotnet new install Microsoft.FluentUI.AspNetCore.Templates

dotnet new install Microsoft.FluentUI.AspNetCore.Templates

The above command will install the fluent UI template

dotnet new fluentblazor --name MyApplication  

dotnet new fluentblazor --name MyApplication  

The above command will create a new Blazor application with Fluent UI template.

In this blog, we are going to see how to do basic manual setup to get more insight into the Fluent UI design framework integration

For manual setup, first create a Blazor web app using Visual Studio

Uncheck the Include sample pages

Install the following packages using NuGet Package Manager

dotnet add package Microsoft.FluentUI.AspNetCore.Components 
dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

dotnet add package Microsoft.FluentUI.AspNetCore.Components 
dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

The above packages will install the Blazor Fluent UI components and Icons to the project. This wrapper comes with all the CSS packages for the Fluent UI; no further actions are required to reference the CSS.

Program.cs

Add the Fluent UI Component service

builder.Services.AddFluentUIComponents();

builder.Services.AddFluentUIComponents();

This registers Fluent UI Blazor component with the application’s dependency injection system.

It ensures the required services are registered and the application can use Fluent UI controls

_Imports.razor

Let’s make the Fluent UI namespace available across the project

@using Microsoft.FluentUI.AspNetCore.Components
@using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons

@using Microsoft.FluentUI.AspNetCore.Components
@using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons

Add NavMenu.razor under Layout page

<div class="navmenu">
    <label for="navmenu-toggle" class="navmenu-icon"><FluentIcon Value="@(new Icons.Regular.Size20.Navigation())" Color="Color.Fill" /></label>
    <nav class="sitenav" aria-labelledby="main-menu">
        <FluentNavMenu Id="main-menu" Collapsible="true" Width="250" Title="Navigation menu" @bind-Expanded="expanded" CustomToggle="true">
            <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
            <FluentNavLink Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
            <FluentNavLink Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>
        </FluentNavMenu>
    </nav>
</div>

<div class="navmenu">
    <label for="navmenu-toggle" class="navmenu-icon"><FluentIcon Value="@(new Icons.Regular.Size20.Navigation())" Color="Color.Fill" /></label>
    <nav class="sitenav" aria-labelledby="main-menu">
        <FluentNavMenu Id="main-menu" Collapsible="true" Width="250" Title="Navigation menu" @bind-Expanded="expanded" CustomToggle="true">
            <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
            <FluentNavLink Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
            <FluentNavLink Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>
        </FluentNavMenu>
    </nav>
</div>

The above code creates a sidebar navigation menu using Fluent UI components for a modern look and feel.

Click here for more details

MainLayout.razor

Do respective changes in the MainLayout to implement Fluent layout, as given below

<FluentLayout>
    <FluentHeader>
        BlazorFluentUI
    </FluentHeader>
    <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
        <NavMenu />
        <FluentBodyContent Class="body-content">
            <div class="content">
                @Body
            </div>
        </FluentBodyContent>
    </FluentStack>
    <FluentFooter>
        <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
        <FluentSpacer />
        <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
    </FluentFooter>
</FluentLayout>

<FluentLayout>
    <FluentHeader>
        BlazorFluentUI
    </FluentHeader>
    <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
        <NavMenu />
        <FluentBodyContent Class="body-content">
            <div class="content">
                @Body
            </div>
        </FluentBodyContent>
    </FluentStack>
    <FluentFooter>
        <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
        <FluentSpacer />
        <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
    </FluentFooter>
</FluentLayout>

Ensure you include NavMenu Component

Now run the application, and you can experience the Microsoft Fluent UI design

Summary:

In this article, we explored how to get started with Blazor Fluent UI by walking through a step-by-step implementation guide. From installing the Fluent UI library to customizing the NavMenu, each step focused on integrating modern, accessible design into your Blazor app. By the end, we have a functional layout styled with Fluent UI components.

Click here for the source code