This post is gonna be a short one (hence the Tips tag), but it implements something I wish was natively supported in Blazor: setting the page title!

That's right, we're going to see how to take something that used to be a single line of code and make it... *counts on fingers*... 17 lines of code! Progress!

OK, joking aside, I think this is a useful component, and I hope you do too, dear readers.

Website design books
Honestly, I think we're just a little beyond this by now. Photo by Greg Rakozy / Unsplash

Note: this sample project was created using Blazor WebAssembly and .NET Core 3.1. I believe it also works in Blazor Server, though if any of my dear readers could prove this I would be eternally grateful.

The Sample Project

Dear Readers, you know me by now, and therefore you know there's a sample project for this post! Check out the BlazorGames project on GitHub:

Contribute to exceptionnotfound/BlazorGames development by creating an account on GitHub.

The Script

Before we do anything else, we need a straightforward JavaScript function to set the title:

window.setTitle = (title) => {
    document.title = title;

This function now needs to be invoked by our Blazor component.

Creating The Component

Let's add a new Blazor Component to our Shared folder, and name it PageTitle.razor:

This Blazor component has only one property, and two methods:

@inject IJSRuntime _jsRuntime;

@code {
    public string Title { get; set; }

    protected override async Task OnInitializedAsync()
        await setTitle();

    private async Task setTitle()
        await _jsRuntime.InvokeVoidAsync("setTitle", Title );

Let's discuss the four main things this PageTitle component is doing:

  • The component needs the IJSRuntime injected into it. This class allows .NET to call JavaScript methods.
  • The component has the property Title set with the [Parameter] attribute, so that it can be set during invocation by other components.
  • We are overriding the OnInitializedAsync() method provided by Blazor to call another method, setTitle().
  • Finally, the setTitle() method is where we are invoking our JavaScript method to set the page title.

Using the New Component

Using this component is pretty straightforward: on any Blazor component that needs it, we can instantiate our new PageTitle component like this:

<PageTitle Title="What Is Blazor?" />

You can see examples of this in my BlazorGames GitHub project I mentioned earlier, such as on the "What Is Blazor?" page.


Using a new Blazor Component and some minor JavaScript, we can set the page title very easily in our Blazor projects!

Got any suggestions on how to improve this component? Submit a pull request!

Also, if this post was helpful, would you consider buying me a coffee? Any support you give goes to my projects and helps keep traditional ads off my site. Thanks!

Matthew Jones
I’m a .NET developer, blogger, speaker, husband and father who just really enjoys the teaching/learning cycle.One of the things I try to do differently with Exception...

Thanks for reading, and Happy Coding!

Hello Dear Reader! Want to get the best C#, ASP.NET, web tech, tips, and stories anywhere on the Web? Sign up to receive my premium newsletter The Catch Block! Each Wednesday, you'll get the best reads, job listings, stories, tips, and news from around the ASP.NET and C# worlds. All for only $5/month or $50/year! Become a subscriber today!