Skip to content

Integrating Fluent UI

Prerequisites

Create a project using the official template.

Bash
1
2
3
# Installing the FluentUI template
dotnet new install Microsoft.FluentUI.AspNetCore.Templates
dotnet new fluentblazorwasm --name MyApplication

Creating WebPaths.cs

Create WebPaths.cs to define URL paths. Unlike other frameworks, FluentUI's Icon is defined as a class rather than a string, so you can't specify it directly. Therefore, specify the icon class in a generic format. Use FluentUI Icons for icon definitions. For detailed configuration, refer to Menu Item Customization.

C#
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
using BlazorPathHelper;
// Use static to simplify icon definitions
using static Microsoft.FluentUI.AspNetCore.Components.Icons.Regular.Size20;

[BlazorPath]
public partial class WebPaths
{
    [Item<Home>("Home")]
    public const string Home = "/";
    [Item<TextHeader1>("Sample1")]
    public const string Sample1 = "/sample1";
    [Item<AddCircle>("Sample1C1")]
    public const string Sample1C1 = $"{Sample1}/child1";
    [Item<AddCircle>("Sample1C2")]
    public const string Sample1C2 = $"{Sample1}/child2";
    [Item<CheckmarkCircle>("Sample1C2C1")]
    public const string Sample1C2C1 = $"{Sample1}/child2/child1";
    [Item<TextHeader2>("Sample2")]
    public const string Sample2 = "/sample2";
    [Item<Star>("Sample2C1")]
    public const string Sample2C1 = $"{Sample2}/child1";
    [Item<TextHeader3>("Sample3")]
    public const string Sample3 = "/sample3";
}

Creating the Menu Component

Create NavMenuItem.razor to display the menu component.

Text Only
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@using BlazorPathHelper

@foreach(var menuItem in MenuItems)
{
  <!-- Handle cases with and without child elements separately -->
  @if(menuItem.HasChildren)
  {
    <!-- Use menuItem.Key for defining the key attribute -->
    <!-- menuItem.Path represents the URL path of the menu item -->
    <!-- Cast Icon to use it since it's of type object? -->
    <FluentNavGroup @key=@menuItem.Key Href="@menuItem.Path"
        Title="@menuItem.Name" Icon="@((Icon?)menuItem.Icon)">
      <!-- Recursively call to display child elements -->
      <NavMenuItem MenuItems="menuItem.Children"/>
    </FluentNavGroup>
  }
  else
  {
    <!-- Apply NavLinkMatch.All only to the homepage, use Prefix otherwise -->
    <FluentNavLink @key=@menuItem.Key Href="@menuItem.Path"
        Match="@(menuItem.IsHome ? NavLinkMatch.All : NavLinkMatch.Prefix)"
        Icon="@((Icon?)menuItem.Icon)" IconColor="Color.Accent">
      @menuItem.Name
    </FluentNavLink>
  }
}

@code {
  // Receive an array of menu items
  [Parameter, EditorRequired]
  public BlazorPathMenuItem[] MenuItems { get; set; } = [];
}

Displaying the Menu

Add the menu display component to MainLayout.razor.

Text Only
1
2
3
4
5
6
<!-- Omitted -->
<FluentNavMenu Id="main-menu" Width="250" Collapsible="true"
               Title="Navigation menu" CustomToggle="true">
  <NavMenuItem MenuItems="WebPaths.MenuItem"/>
</FluentNavMenu>
<!-- Omitted -->

Execution Result

Source Code

You can find an implementation example at Example.FluentUI.