Multi Drawer in MAUI Navigation Drawer (SfNavigationDrawer)

18 Dec 20255 minutes to read

The Navigation drawer allows users to open the drawer on multiple sides with different toggle methods. The DrawerSettings class and its properties need to be used when users need to provide multiple drawers. The multiple drawers can be implemented using the following drawer settings.

  • DrawerSettings
  • SecondaryDrawerSettings

NOTE

Users can open only one drawer at a time.

Multi Drawer

DrawerSettings

Implement the primary drawer using the DrawerSettings property in SfNavigationDrawer. The following code sample demonstrates how to customize the primary drawer.

<navigationDrawer:SfNavigationDrawer>
        <navigationDrawer:SfNavigationDrawer.DrawerSettings>
            <navigationDrawer:DrawerSettings DrawerWidth="250"
                                             Transition="SlideOnTop"
                                             ContentBackground="LightGray"
                                             Position="Left">
            </navigationDrawer:DrawerSettings>
        </navigationDrawer:SfNavigationDrawer.DrawerSettings>
    </navigationDrawer:SfNavigationDrawer>
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
DrawerSettings drawerSettings = new DrawerSettings();
drawerSettings.DrawerWidth = 250;
drawerSettings.Transition = Transition.SlideOnTop;
drawerSettings.ContentBackground = Colors.LightGray;
drawerSettings.Position = Position.Left;
navigationDrawer.DrawerSettings = drawerSettings;
this.Content = navigationDrawer;

SecondaryDrawerSettings

Implement the secondary drawer using the SecondaryDrawerSettings property in SfNavigationDrawer. Its properties and functionalities are same as the primary drawer. The secondary drawer can be set to different positions similar to the primary drawer. The following code demonstrates how to customize the secondary drawer.

<navigationDrawer:SfNavigationDrawer>
        <navigationDrawer:SfNavigationDrawer.SecondaryDrawerSettings>
            <navigationDrawer:DrawerSettings x:Name="secondaryDrawer"
                                    ContentBackground="Blue"
                                    DrawerWidth= "250"
                                    Position="Right"
                                    Transition="SlideOnTop">
            </navigationDrawer:DrawerSettings>
        </navigationDrawer:SfNavigationDrawer.SecondaryDrawerSettings>
    </navigationDrawer:SfNavigationDrawer>
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
DrawerSettings secondaryDrawer = new DrawerSettings();
secondaryDrawer.Position = Position.Right;
secondaryDrawer.Transition = Transition.SlideOnTop;
secondaryDrawer.ContentBackground = Colors.Blue;
secondaryDrawer.DrawerWidth = 250;
navigationDrawer.SecondaryDrawerSettings = secondaryDrawer;
this.Content = navigationDrawer;

NOTE

When the primary drawer and the secondary drawer are set to the same position, the primary drawer will open on swiping.

Toggling method

Users can toggle the secondary drawer using the ToggleSecondaryDrawer method.

  • C#
    • SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
navigationDrawer.ToggleSecondaryDrawer();

    Opening the drawer programmatically

    The IsOpen property in the DrawerSettings of SecondaryDrawerSettings used to open or close the secondary drawer programmatically.

    The following code sample demonstrates how to set IsOpen property in XAML and C#.

    <navigationDrawer:SfNavigationDrawer>
        <navigationDrawer:SfNavigationDrawer.SecondaryDrawerSettings>
            <navigationDrawer:DrawerSettings IsOpen="True">
            </navigationDrawer:DrawerSettings>
        </navigationDrawer:SfNavigationDrawer.SecondaryDrawerSettings>
    </navigationDrawer:SfNavigationDrawer>
    SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
DrawerSettings secondaryDrawer = new DrawerSettings();
secondaryDrawer.IsOpen = true;
navigationDrawer.SecondaryDrawerSettings = secondaryDrawer;
this.Content = navigationDrawer;