# Customize the Title Bar of a MAUI app with these simple steps

# Introduction

Many mobile applications come with their own, custom title styling. This is important, because the title bar *(or navigation bar, I will use the terms interchangeably here)* plays a vital role in brand recognition since it is visible at the top of an app.

In this blog post, I will show you how you can customize the navigation bar of a .NET MAUI Shell app. The goal is to add a custom font, title and some buttons to it. The final result will look like this:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681293436143/f572902b-2e51-4688-b82c-862dee714c25.png align="center")

You can find the example code for this blog post in my [MAUI Samples](https://github.com/ewerspej/maui-samples) repository.

# Prerequisites

Before we can start with the customization of the *TitleView*, we need to add some fonts. I'm using `MaterialIconsOutlined-Regular.otf` for the icons *(available in the* [Google Material Icons](https://github.com/google/material-design-icons/tree/master/font) *GitHub repository)* and `Strande2.ttf` for the Title.

Adding font files couldn't be simpler in .NET MAUI, we just need to add them to the *Resources/Fonts/* directory of our MAUI app project and register them:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681288208895/27d8b6c8-6c70-4141-be8d-101d1407b7ab.png align="center")

It's not necessary to set the Build Action for each file to `MauiFont` separately, because this happens automatically as long as the files are added to the *Fonts* directory. We can see why this works when we edit the *.csproj* file, where we will find the following:

```xml
<!-- Custom Fonts -->
<MauiFont Include="Resources\Fonts\*" />
```

This means that adding the font files to the *Fonts* directory is all we need to do, they will be picked up as `MauiFont` files automatically.

Then, we just need to register the fonts in our *MauiProgram.cs* and we're good to go:

```csharp
public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                fonts.AddFont("MaterialIconsOutlined-Regular.otf", "MaterialIconsOutlined-Regular");
                fonts.AddFont("MaterialIcons-Regular.ttf", "MaterialIcons-Regular");
                fonts.AddFont("Strande2.ttf", "Strande2");
            });

        return builder.Build();
    }
}
```

We can now access the fonts by their name (excluding the file extension). More on that a bit further down.

First, it's time to start with the customization of the *TitleView*.

# Customizing the Title Bar

Let's start with the background color, then we'll customize the title and finally, we'll add some buttons.

## Background Color

In a MAUI Shell app, we can access and control the style of the navigation bar in the root of any *ContentPage*.

In order to change the background color of the navigation bar, we can simply set the `Shell.BackgroundColor` to any valid value, either a named color *(e.g. "DarkGreen")* or a hex code *(such as "#01AB67")*:

```xml
<ContentPage
  x:Class="MauiSamples.Views.MainPage"
  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
  Shell.BackgroundColor="DarkGreen">
  <!-- ... -->
</ContentPage>
```

This will give us the following:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681288958134/9079e657-6b1a-4650-83d1-11e0825d2c98.png align="center")

Cool, we have a green background. Next, we'll change the font and text.

## Title Font and Text

In a MAUI Shell app, you can set an entirely custom *TitleView*, which means that you can add [all kinds of views into the *TitleView*](https://learn.microsoft.com/dotnet/maui/fundamentals/shell/pages#display-views-in-the-navigation-bar), such as *Layouts*, *Labels*, *Buttons*, *Images*, and so on. In this blog post, I'll keep it simple, so we'll just add a *HorizontalStackLayout* with a single *Label*.

Since we've already added our custom font, we can now use that in the *Label* by setting the `FontFamily="Strande2"`. We can set the custom *TitleView* like this by setting the `Shell.TitleView` property:

```xml
<Shell.TitleView>
  <HorizontalStackLayout VerticalOptions="Fill">
    <Label
      Text="Welcome to MAUI"
      FontFamily="Strande2"
      TextColor="White"
      VerticalTextAlignment="Center"
      VerticalOptions="Center"
      HeightRequest="50"
      FontSize="Medium" />
  </HorizontalStackLayout>
</Shell.TitleView>
```

Our *TitleView* now looks like this with a green background, as well as a custom font and title:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681289293837/a2615dd5-61b2-402b-95ea-eb0f292003e7.png align="center")

The only thing missing are the buttons. Let's do that next using *ToolbarItems*.

## Toolbar Items

MAUI gives us different options to add buttons to the navigation bar. One of them would be to add more elements to the *HorizontalStackLayout* inside our custom *TitleView*. Another way is to use *ToolbarItems*, which is what we'll do for the buttons.

While adding *Buttons* and *Images* to the *TitleView* directly gives us more control over their appearance, especially their position, *ToolbarItems* have the advantage that they position themselves according to the order they are defined in. They are right-aligned by default, with the first item being the left-most. This means that new items will be added to the right, while existing items are shifted to the left.

*ToolbarItems* can either use text or icons. For icons, the `ToolbarItem` class comes with an `IconImageSource` property, which is of type `ImageSource`. This means that we can also use a `FontImageSource` to provide the icon for our buttons based on a custom font.

> You can find more information on [Icon Fonts in MAUI](https://learn.microsoft.com/dotnet/maui/user-interface/fonts#display-font-icons) in the official documentation.

Let's add the first button using such a `FontImageSource` by using the `MaterialIconsOutlined-Regular` icon font:

```xml
<ContentPage.ToolbarItems>
  <ToolbarItem Command="{Binding SetLowBrightnessCommand}">
    <ToolbarItem.IconImageSource>
      <FontImageSource
        FontFamily="MaterialIconsOutlined-Regular"
        Glyph="&#xe51c;"/>
    </ToolbarItem.IconImageSource>
  </ToolbarItem>
</ContentPage.ToolbarItems>
```

The `FontFamily` property is used to select the icon font and the `Glyph` property is used to set select the specific icon. The `ToolbarItem` also supports binding to a `Command` from our *ViewModel*.

> **Note:** Google offers a user-friendly cheat sheet to view the [Material Symblos and Icons](https://fonts.google.com/icons) including their code points. The code point of the Glyph in this example is `e51c`. Glyphs are individual characters from a character set or font and use the `"&#xCODE;"` notation.

Adding the first `ToolbarItem` gives us the following:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681291250668/895a8505-5f92-4b5c-a540-7d4655cc42d3.png align="center")

As you can see, the `ToolbarItem` is completely right-aligned, we didn't have to specify the size or position for that.

Let's add another `ToolbarItem` below the first one in the XAML code to see what happens:

```xml
<ContentPage.ToolbarItems>
  <ToolbarItem Command="{Binding SetLowBrightnessCommand}">
    <ToolbarItem.IconImageSource>
      <FontImageSource
        FontFamily="MaterialIconsOutlined-Regular"
        Glyph="&#xe51c;"/>
    </ToolbarItem.IconImageSource>
  </ToolbarItem>
  <ToolbarItem Command="{Binding SetHighBrightnessCommand}">
    <ToolbarItem.IconImageSource>
      <FontImageSource
        FontFamily="MaterialIconsOutlined-Regular"
        Glyph="&#xe518;"/>
    </ToolbarItem.IconImageSource>
  </ToolbarItem>
</ContentPage.ToolbarItems>
```

This gives us the following result:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681291415457/46013c74-5e41-4644-8417-b89725727e41.png align="center")

As expected, the first `ToolbarItem` shifted to the left, the second one got added right to it and the entire collection of *ToolbarItems* remains right-aligned.

## Customizing the Toolbar Items

Each `ToolbarItem` can be configured based on your needs. For example, you can set different colors for each `FontIconSource` and even change the size of each:

```xml
<ContentPage.ToolbarItems>
  <ToolbarItem Command="{Binding SetLowBrightnessCommand}">
    <ToolbarItem.IconImageSource>
      <FontImageSource
        FontFamily="MaterialIconsOutlined-Regular"
        Glyph="&#xe51c;"
        Color="LightBlue"
        Size="20"/>
    </ToolbarItem.IconImageSource>
  </ToolbarItem>
  <ToolbarItem Command="{Binding SetHighBrightnessCommand}">
    <ToolbarItem.IconImageSource>
      <FontImageSource
        FontFamily="MaterialIconsOutlined-Regular"
        Glyph="&#xe518;"
        Color="LightPink"
        Size="32"/>
    </ToolbarItem.IconImageSource>
  </ToolbarItem>
</ContentPage.ToolbarItems>
```

This will result in something like below:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681292576399/c8f33e02-6037-498e-8754-7f60f9788296.png align="center")

As you can see, those items have different sizes and colors - pretty cool!

## Secondary Toolbar Items

Adding more and more items would eventually leave no more space for the title, which would at some point get covered by *ToolbarItems*:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681370848199/d605b124-6bc2-4600-88ab-d260365943d0.png align="center")

Therefore, if we wanted to add more items, we can do so by placing them into a secondary toolbar menu. *Secondary ToolbarItems* can be defined by setting their `Order` property to `Secondary`:

```xml
  <ContentPage.ToolbarItems>
    <!-- ... -->
    <ToolbarItem
      Order="Secondary"
      Text="Item 3" />
    <ToolbarItem
      Order="Secondary"
      Text="Item 4" />
    </ToolbarItem>
  </ContentPage.ToolbarItems>
```

If secondary *ToolbarItems* are defined, a little burger menu icon appears on the right of the tool bar:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681292889360/66807f27-b1bb-40cb-836f-34cd55b3a85a.png align="center")

The secondary items only become visible after tapping the burger menu:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681292934150/c0f7150d-9244-4e33-a7b7-2b7ffeeb5649.png align="center")

> ***Note:*** *Secondary-level ToolbarItems do not support icons, only text will be shown.*

And that's it, we're done. 🏆 Awesome, you just learned how to customize the TitleView of a .NET MAUI Shell app! 💪

# Conclusion and next steps

Using custom fonts, a custom *TitleView* and some *ToolbarItems*, we can quickly mesh up our own customizable title bar to make our app stand out. I hope you learned something new today.

There are several different ways to customize the look and feel of the navigation bar (or title bar) in a MAUI app and I've just shown you one way of doing it with the least amount of effort. Platform-specific customizations are also possible, but that would require an entire article on its own *(let me know if you're interested in such an article!)*.

If you enjoyed this blog post, then follow me on [**LinkedIn**](https://www.linkedin.com/in/jewerspeters), subscribe to this [**blog**](https://hashnode.com/@ewerspej) and star the [**GitHub** **repository**](https://github.com/ewerspej/maui-samples) for this post so you don't miss out on any future posts and developments.