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

29 Jul 20265 minutes to read

The size of the side pane is controlled by the DrawerWidth and DrawerHeight properties of DrawerSettings. The property that takes effect depends on the drawer’s Position.

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
DrawerWidth double 200 Width of the side pane. Applied when Position is Left or Right.
DrawerHeight double 500 Height of the side pane. Applied when Position is Top or Bottom.

DrawerHeight

The DrawerHeight property changes the height of the side pane. It is primarily applied when Position is set to Top or Bottom.

<navigationDrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationDrawer:SfNavigationDrawer.DrawerSettings>
        <navigationDrawer:DrawerSettings Position="Top"
                                         DrawerHeight="50"
                                         DrawerHeaderHeight="50">
            <navigationDrawer:DrawerSettings.DrawerHeaderView>
                <Label Text="This is a brief content used to demonstrate the DrawerHeight property."
                       VerticalOptions="Center"
                       HorizontalOptions="Center" />
            </navigationDrawer:DrawerSettings.DrawerHeaderView>
        </navigationDrawer:DrawerSettings>
    </navigationDrawer:SfNavigationDrawer.DrawerSettings>
</navigationDrawer:SfNavigationDrawer>
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer
{
    DrawerSettings = new DrawerSettings
    {
        Position = Position.Top,
        DrawerHeight = 50,
        DrawerHeaderHeight = 50,
        DrawerHeaderView = new Label
        {
            Text = "This is a brief content used to demonstrate the DrawerHeight property.",
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center
        }
    }
};

Side pane height in .NET MAUI Navigation Drawer

DrawerWidth

The DrawerWidth property changes the width of the side pane. It is primarily applied when Position is set to Left or Right.

<navigationDrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationDrawer:SfNavigationDrawer.DrawerSettings>
        <navigationDrawer:DrawerSettings Position="Left"
                                         DrawerWidth="250"
                                         DrawerHeaderHeight="75">
            <navigationDrawer:DrawerSettings.DrawerHeaderView>
                <Label Text="This is a brief content used to demonstrate the DrawerWidth property."
                       VerticalOptions="Center"
                       HorizontalOptions="Center" />
            </navigationDrawer:DrawerSettings.DrawerHeaderView>
        </navigationDrawer:DrawerSettings>
    </navigationDrawer:SfNavigationDrawer.DrawerSettings>
</navigationDrawer:SfNavigationDrawer>
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer
{
    DrawerSettings = new DrawerSettings
    {
        Position = Position.Left,
        DrawerWidth = 250,
        DrawerHeaderHeight = 75,
        DrawerHeaderView = new Label
        {
            Text = "This is a brief content used to demonstrate the DrawerWidth property.",
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center
        }
    }
};

Side pane width in .NET MAUI Navigation Drawer

See also