Drawer Position in .NET MAUI Navigation Drawer (SfNavigationDrawer)

29 Jul 20264 minutes to read

The side pane of the .NET MAUI Navigation Drawer can be opened from any of the four sides of the screen. The side is controlled by the Position property of DrawerSettings.

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.

Position values

Value Description Size property to use
Left Opens from the left edge. The most common position for primary navigation. DrawerWidth
Right Opens from the right edge. Useful for secondary actions, filters, or details. DrawerWidth
Top Opens from the top edge. Useful for notifications, banners, or search bars. DrawerHeight
Bottom Opens from the bottom edge. Useful for sheets, action menus, or keyboards. DrawerHeight

Left

The navigation pane pulled in and out from the Left side can be set as follows:

<navigationDrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationDrawer:SfNavigationDrawer.DrawerSettings>
        <navigationDrawer:DrawerSettings Position="Left" />
    </navigationDrawer:SfNavigationDrawer.DrawerSettings>
</navigationDrawer:SfNavigationDrawer>
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer()
{
    DrawerSettings = new DrawerSettings
    {
        Position = Position.Left
    },
};

Drawer opened from the Left side in .NET MAUI Navigation Drawer

The navigation pane pulled in and out from the Right side can be set as follows:

<navigationDrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationDrawer:SfNavigationDrawer.DrawerSettings>
        <navigationDrawer:DrawerSettings Position="Right" />
    </navigationDrawer:SfNavigationDrawer.DrawerSettings>
</navigationDrawer:SfNavigationDrawer>
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer()
{
    DrawerSettings = new DrawerSettings
    {
        Position = Position.Right
    },
};

Drawer opened from the Right side in .NET MAUI Navigation Drawer

Top

The navigation pane pulled in and out from the Top side can be set as follows:

<navigationDrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationDrawer:SfNavigationDrawer.DrawerSettings>
        <navigationDrawer:DrawerSettings Position="Top" />
    </navigationDrawer:SfNavigationDrawer.DrawerSettings>
</navigationDrawer:SfNavigationDrawer>
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer()
{
    DrawerSettings = new DrawerSettings
    {
        Position = Position.Top
    },
};

Drawer opened from the Top side in .NET MAUI Navigation Drawer

Bottom

The navigation pane pulled in and out from the Bottom side can be set as follows:

<navigationDrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationDrawer:SfNavigationDrawer.DrawerSettings>
        <navigationDrawer:DrawerSettings Position="Bottom" />
    </navigationDrawer:SfNavigationDrawer.DrawerSettings>
</navigationDrawer:SfNavigationDrawer>
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer()
{
    DrawerSettings = new DrawerSettings
    {
        Position = Position.Bottom
    },
};

Drawer opened from the Bottom side in .NET MAUI Navigation Drawer

See also