.NET MAUI NavigationView Header

The Telerik UI for .NET MAUI NavigationView control has a navigation header. The header contains a toggle navigation button (for opening and closing the navigation page) and a navigation content (by default label with a text).

You can customize the header by setting the HeaderText or HeaderTemplate properties.

Configuring the Header

• HeaderText (string)—Defines the text that is displayed in the NavigationView header.
• HeaderTemplate (DataTemplate)—Specifies the content template for the NavigationView header.
• HeaderStyle (string)—Specifies the style applied to the header, this includes the text and the navigation button. For more details, review the NavigationView Header Styling article.

Example

Here is an example for HeaderTemplate:

1. Define the RadNavigationView:

• XAML

<telerik:RadNavigationView x:Name="navigationView"
                           HeaderTemplate="{StaticResource headerTemplate}"
                           HeaderText="Personal details">
    <telerik:RadNavigationView.Items>
        <telerik:NavigationViewItem Position="Header">
            <telerik:NavigationViewItem.ImageSource>
                <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconSearch}"
                                 FontFamily="{x:Static telerik:TelerikFont.Name}"
                                 Size="16" />
            </telerik:NavigationViewItem.ImageSource>
        </telerik:NavigationViewItem>
        <telerik:NavigationViewItem Text="About Author">
            <telerik:NavigationViewItem.ImageSource>
                <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconAuthor}"
                                 FontFamily="{x:Static telerik:TelerikFont.Name}"
                                 Size="16" />
            </telerik:NavigationViewItem.ImageSource>
        </telerik:NavigationViewItem>
        <telerik:NavigationViewItem Text="Add data" 
                                    IsSelectable="False">
            <telerik:NavigationViewItem.ImageSource>
                <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconAdd}"
                                 FontFamily="{x:Static telerik:TelerikFont.Name}"
                                 Size="16" />
            </telerik:NavigationViewItem.ImageSource>
        </telerik:NavigationViewItem>
        <telerik:NavigationViewItem Text="Edit data">
            <telerik:NavigationViewItem.ImageSource>
                <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconEdit}"
                                 FontFamily="{x:Static telerik:TelerikFont.Name}"
                                 Size="16" />
            </telerik:NavigationViewItem.ImageSource>
        </telerik:NavigationViewItem>
        <telerik:NavigationViewItem Text="Delete data">
            <telerik:NavigationViewItem.ImageSource>
                <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconDelete}"
                                 FontFamily="{x:Static telerik:TelerikFont.Name}"
                                 Size="16" />
            </telerik:NavigationViewItem.ImageSource>
        </telerik:NavigationViewItem>
    </telerik:RadNavigationView.Items>
    <telerik:RadNavigationView.Content>
        <Label Text="This is the content of the NavigationView control"
               VerticalOptions="Center"
               HorizontalOptions="Center"/>
    </telerik:RadNavigationView.Content>
</telerik:RadNavigationView>

2. Define the HeaderTemplate:

• XAML

<DataTemplate x:Key="headerTemplate">
    <telerik:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
                       Background="{TemplateBinding Background}"
                       BorderColor="{TemplateBinding BorderColor}"
                       BorderBrush="{TemplateBinding BorderBrush}"
                       BorderThickness="{TemplateBinding BorderThickness}"
                       CornerRadius="{TemplateBinding CornerRadius}">
        <Grid ColumnDefinitions="Auto, *"
              ColumnSpacing="{OnPlatform WinUI=4}">
            <Grid WidthRequest="{TemplateBinding CompactWidth}"
                  IsVisible="{TemplateBinding IsHeaderButtonVisible}">
                <Label Text="{TemplateBinding HeaderText}" 
                       Grid.Column="1" 
                       VerticalOptions="Center" 
                       HorizontalOptions="Center"/>
            </Grid>
        </Grid>
    </telerik:RadBorder>
</DataTemplate>

3. Add the telerik namespace:

• XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

Toggle Navigation Button

The NavigationViewToggleButton represents a toggle button that opens or closes the NavigationViewPane. The button is part of the NavigationView header.

You can style the button through the HeaderStyle property of the RadNavigationView. For more details, review the NavigationView Header Styling article.

For the runnable NavigationView Header example, see the SDKBrowser Demo Application and go to NavigationView > Features category.