How to Set the Header and Footer View in .NET MAUI Navigation Drawer?

This section explains setting the header and footer views in the .NET MAUI Navigation Drawer. In .NET MAUI, this can be achieved using the DrawerHeaderView and DrawerFooterView properties.

Header View
The header view is displayed at the top of the drawer. You can set the header content and adjust its height using the DrawerHeaderView and DrawerHeaderHeight properties, respectively.

XAML

<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationdrawer:SfNavigationDrawer.DrawerSettings>
        <navigationdrawer:DrawerSettings DrawerHeaderHeight="150">
            <navigationdrawer:DrawerSettings.DrawerHeaderView>
                <Grid>
                    <VerticalStackLayout VerticalOptions="Center"
                                         HorizontalOptions="Center">
                        <Label Text="Header View"/>
                    </VerticalStackLayout>
                </Grid>
            </navigationdrawer:DrawerSettings.DrawerHeaderView>
            ...
        </navigationdrawer:DrawerSettings>      
    </navigationdrawer:SfNavigationDrawer.DrawerSettings>
    ...
</navigationdrawer:SfNavigationDrawer>

Output

Footer View
The footer view is displayed at the bottom of the drawer. Similar to the Header View. You can set the footer content and adjust its height using the DrawerFooterView and DrawerFooterHeigh properties.

XAML

<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationdrawer:SfNavigationDrawer.DrawerSettings>
        <navigationdrawer:DrawerSettings DrawerFooterHeight="150">
           ...
            <navigationdrawer:DrawerSettings.DrawerFooterView>
                <Grid>
                    <VerticalStackLayout VerticalOptions="Center"
                                         HorizontalOptions="Center">
                        <Label Text="Footer View"/>
                    </VerticalStackLayout>
                </Grid>
            </navigationdrawer:DrawerSettings.DrawerFooterView>
        </navigationdrawer:DrawerSettings>
    </navigationdrawer:SfNavigationDrawer.DrawerSettings>
    ...
</navigationdrawer:SfNavigationDrawer>

Output

Download the complete sample from GitHub

Conclusion
I hope you enjoyed learning how to set the header and footer view in .NET MAUI Navigation Drawer.

You can refer to our .NET MAUI Navigation Drawer feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Navigation Drawer documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI Navigation Drawer and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal, or the feedback portal. We are always happy to assist you!