Dynamically setting the page title in a Blazor application

Setting the page title helps users organize their browser tabs and conveys useful information at a glance. For instance, Outlook adds an indicator to the title when you have unread messages, and Microsoft Teams shows the number of unread messages in the title.

Blazor applications are single-page applications, so the page title may need to be updated dynamically when the user navigates to another page or when the application state changes. Since Blazor does not provide a built-in method to change the page title, you need to call a JavaScript function to update the document title.

1. Add this script in the page

   HTMLcopy

   <script>
       function BlazorSetTitle(title) {
           document.title = title;
       }
   </script>

2. Create a new Blazor component named Shared/PageTitle.razor with the following content

   Razorcopy

   @inject IJSRuntime JSRuntime
   @code{
       [Parameter]
       public string Value { get; set; }
   
       protected override async Task OnAfterRenderAsync(bool firstRender)
       {
           await JSRuntime.InvokeVoidAsync("BlazorSetTitle", Value);
       }
   }

3. Use the PageTitle component in the pages

   Razorcopy

   @page "/counter"
   
   <PageTitle Value="@GetPageTitle()" />
   
   <h1>Counter</h1>
   <p>Current count: @currentCount</p>
   <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
   
   @code {
       private int currentCount = 0;
   
       private void IncrementCount() => currentCount++;
   
       private string GetPageTitle() => $"Counter ({currentCount}) - Meziantou";
   }

The page title is updated whenever the Value parameter changes.

#ASP.NET Core Blazor 5.0

The next release of Blazor includes several new features, one of which allows influencing the HTML head from a Blazor component. This feature lets you set the <title>, <meta>, and <link> tags. The approach is very similar to what we built earlier, except you do not need to write any JS code manually, and it should support pre-rendering.

To use this feature, you need to:

• Add a package reference to the Microsoft.AspNetCore.Components.Web.Extensions package
• Include the following script tag <script src="_content/Microsoft.AspNetCore.Components.Web.Extensions/headManager.js"></script>
• Add a @using directive for Microsoft.AspNetCore.Components.Web.Extensions.Head

Then, you can use the Title component to set the document title:

<Title Value="@title" />

For completeness, here's how to set the description, the favicon, and a custom link element:

@using Microsoft.AspNetCore.Components.Web.Extensions.Head
@page "/counter"

<Title value="My title" />
<Meta name="description" content="Modifying the head from a Blazor component." />
<Link rel="icon" type="image/x-icon" href="/favicon.ico" />
<Link rel="alternate" href="/feed.rss" type="application/rss+xml" />

#Additional resources

• Influencing HTML Head from a Blazor component - Issue
• Influencing HTML Head from a Blazor component - Pull Request
• Document.title - MDN

Do you have a question or a suggestion about this post? Contact me!