Side Pane Content in .NET MAUI Navigation Drawer (SfNavigationDrawer)

29 Jul 202616 minutes to read

The side pane of the .NET MAUI Navigation Drawer is only visible when the drawer is open. The side pane is composed of three regions that stack vertically from top to bottom:

  1. Header content - displayed at the top of the side pane.
  2. Drawer content - displayed in the middle; occupies the space left by the header and footer.
  3. Footer content - displayed at the bottom of the side pane.

NOTE

The header and footer are optional; the drawer content is required to allocate space for the side pane.

Prerequisites

Before using the SfNavigationDrawer, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.NavigationDrawer

For step-by-step setup, refer to the Getting Started documentation.

Properties

Property Type Default Value Description
DrawerHeaderView View null The view displayed at the top of the side pane.
DrawerHeaderHeight double 50 Height of the header area. Set to 0 to hide the header.
DrawerContentView View null The view displayed in the middle of the side pane. Required to allocate space for the drawer.
DrawerFooterView View null The view displayed at the bottom of the side pane.
DrawerFooterHeight double 50 Height of the footer area. Set to 0 to hide the footer.
ContentBackground Color Color.FromArgb("F7F2FB") Background color of the side pane content area.

Layout

The side pane uses a vertical layout with the following stacking order:

  1. DrawerHeaderView (top) - height controlled by DrawerHeaderHeight.
  2. DrawerContentView (middle) - fills the remaining space.
  3. DrawerFooterView (bottom) - height controlled by DrawerFooterHeight.

If any region is null or its height is 0, that region is not rendered and the adjacent regions expand to fill the space.

Header content

The header is displayed at the top of the side pane. Use the DrawerHeaderView property to set the header content and DrawerHeaderHeight to control its height.

<navigationDrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationDrawer:SfNavigationDrawer.DrawerSettings>
        <navigationDrawer:DrawerSettings DrawerHeaderHeight="150" 
                                         DrawerWidth="250">
            <navigationDrawer:DrawerSettings.DrawerHeaderView>
                <Grid BackgroundColor="#6750A4">
                    <VerticalStackLayout VerticalOptions="Center"
                                         HorizontalOptions="Center">
                        <Label Text="Header View" TextColor="White" />
                    </VerticalStackLayout>
                </Grid>
            </navigationDrawer:DrawerSettings.DrawerHeaderView>
        </navigationDrawer:DrawerSettings>
    </navigationDrawer:SfNavigationDrawer.DrawerSettings>
</navigationDrawer:SfNavigationDrawer>
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer()
{
    DrawerSettings = new DrawerSettings
    {
        DrawerWidth = 250,
        DrawerHeaderHeight = 150,
        DrawerHeaderView = new Grid
        {
            BackgroundColor = Color.FromArgb("#6750A4"),
            Children =
            {
                new VerticalStackLayout
                {
                    VerticalOptions = LayoutOptions.Center,
                    HorizontalOptions = LayoutOptions.Center,
                    Children =
                    {
                        new Label { Text = "Header View", TextColor = Colors.White }
                    }
                }
            }
        },
    },
};

Header content in .NET MAUI Navigation Drawer

Header height

Adjust the height of the drawer header content using the DrawerHeaderHeight property.

NOTE

The DrawerHeaderView can be removed by setting the DrawerHeaderHeight to zero.

Footer content

The footer is displayed at the bottom of the side pane. Use the DrawerFooterView property to set the footer content and DrawerFooterHeight to control its height.

<navigationDrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationDrawer:SfNavigationDrawer.DrawerSettings>
        <navigationDrawer:DrawerSettings DrawerFooterHeight="150" 
                                         DrawerWidth="250">
            <navigationDrawer:DrawerSettings.DrawerFooterView>
                <Grid BackgroundColor="#6750A4">
                    <VerticalStackLayout VerticalOptions="Center"
                                         HorizontalOptions="Center">
                        <Label Text="Footer View" TextColor="White" />
                    </VerticalStackLayout>
                </Grid>
            </navigationDrawer:DrawerSettings.DrawerFooterView>
        </navigationDrawer:DrawerSettings>
    </navigationDrawer:SfNavigationDrawer.DrawerSettings>
</navigationDrawer:SfNavigationDrawer>
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer()
{
    DrawerSettings = new DrawerSettings
    {
        DrawerWidth = 250,
        DrawerFooterHeight = 150,
        DrawerFooterView = new Grid
        {
            BackgroundColor = Color.FromArgb("#6750A4"),
            Children =
            {
                new VerticalStackLayout
                {
                    VerticalOptions = LayoutOptions.Center,
                    HorizontalOptions = LayoutOptions.Center,
                    Children =
                    {
                        new Label { Text = "Footer View", TextColor = Colors.White }
                    }
                }
            }
        },
    },
};

Footer content in .NET MAUI Navigation Drawer

Adjust the height of the drawer footer content using the DrawerFooterHeight property.

NOTE

The DrawerFooterView can be removed by setting the DrawerFooterHeight to zero.

Drawer content

The drawer content is displayed between the header and footer. It is set using the DrawerContentView property and occupies the space left by the header and footer.

<navigationDrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationDrawer:SfNavigationDrawer.DrawerSettings>
        <navigationDrawer:DrawerSettings DrawerWidth="250">
            <navigationDrawer:DrawerSettings.DrawerContentView>
                <Grid BackgroundColor="#6750A4">
                    <VerticalStackLayout VerticalOptions="Center"
                                         HorizontalOptions="Center">
                        <Label Text="Drawer Content" TextColor="White" />
                    </VerticalStackLayout>
                </Grid>
            </navigationDrawer:DrawerSettings.DrawerContentView>
        </navigationDrawer:DrawerSettings>
    </navigationDrawer:SfNavigationDrawer.DrawerSettings>
</navigationDrawer:SfNavigationDrawer>
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer()
{
    DrawerSettings = new DrawerSettings
    {
        DrawerWidth = 250,
        DrawerContentView = new Grid
        {
            BackgroundColor = Color.FromArgb("#6750A4"),
            Children =
            {
                new VerticalStackLayout
                {
                    VerticalOptions = LayoutOptions.Center,
                    HorizontalOptions = LayoutOptions.Center,
                    Children =
                    {
                        new Label { Text = "Drawer Content", TextColor = Colors.White }
                    }
                }
            }
        },
    },
};

Drawer content in .NET MAUI Navigation Drawer

Drawer content background

Customize the background color of the side pane content area by setting the ContentBackground property in DrawerSettings.

<navigationDrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationDrawer:SfNavigationDrawer.DrawerSettings>
        <navigationDrawer:DrawerSettings ContentBackground="Red" DrawerWidth="250">
            <navigationDrawer:DrawerSettings.DrawerContentView>
                <Grid BackgroundColor="#6750A4">
                    <VerticalStackLayout VerticalOptions="Center"
                                         HorizontalOptions="Center">
                        <Label Text="Drawer Content" TextColor="White" />
                    </VerticalStackLayout>
                </Grid>
            </navigationDrawer:DrawerSettings.DrawerContentView>
        </navigationDrawer:DrawerSettings>
    </navigationDrawer:SfNavigationDrawer.DrawerSettings>
</navigationDrawer:SfNavigationDrawer>
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer()
{
    DrawerSettings = new DrawerSettings
    {
        DrawerWidth = 250,
        ContentBackground = Colors.Red,
        DrawerContentView = new Grid
        {
            BackgroundColor = Color.FromArgb("#6750A4"),
            Children =
            {
                new VerticalStackLayout
                {
                    VerticalOptions = LayoutOptions.Center,
                    HorizontalOptions = LayoutOptions.Center,
                    Children =
                    {
                        new Label { Text = "Drawer Content", TextColor = Colors.White }
                    }
                }
            }
        }
    }
};

See also