How to toggle the Navigation Drawer in .NET MAUI (SfNavigationDrawer)?

This section demonstrates how to toggle the .NET MAUI NavigationDrawer using three methods:

• IsOpen property
• ToggleDrawer method
• Swipe gesture

Step 1: Create the DrawerHeaderView and DrawerContentView
Define the DrawerHeaderView and DrawerContentView within the DrawerSettings of the NavigationDrawer.
XAML

 <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" >
  <navigationdrawer:SfNavigationDrawer.DrawerSettings>
      <navigationdrawer:DrawerSettings DrawerWidth="250"
                               DrawerHeaderHeight="160">
          <navigationdrawer:DrawerSettings.DrawerHeaderView>
              <Grid BackgroundColor="#6750A4" RowDefinitions="120,40">
                  <Image Source="user.png"
                 HeightRequest="110"
                 Margin="0,10,0,0"
                 BackgroundColor="#6750A4"
                 VerticalOptions="Center"
                 HorizontalOptions="Center"/>
                  <Label Text="James Pollock"
                 Grid.Row="1"
                 HorizontalTextAlignment="Center"
                 HorizontalOptions="Center"
                 FontSize="20"
                 TextColor="White"/>
              </Grid>
          </navigationdrawer:DrawerSettings.DrawerHeaderView>
          <navigationdrawer:DrawerSettings.DrawerContentView>
              <ListView x:Name="listView">
                  <ListView.ItemTemplate>
                      <DataTemplate>
                          <ViewCell>
                              <VerticalStackLayout HeightRequest="40">
                                  <Label Margin="10,7,0,0"
                                 Text="{Binding}"
                                 FontSize="16"
                                 TextColor="Black"/>
                              </VerticalStackLayout>
                          </ViewCell>
                      </DataTemplate>
                  </ListView.ItemTemplate>
              </ListView>
          </navigationdrawer:DrawerSettings.DrawerContentView>
      </navigationdrawer:DrawerSettings>
  </navigationdrawer:SfNavigationDrawer.DrawerSettings>
  ......  
 </navigationdrawer:SfNavigationDrawer>

Step 2: Set up the main ContentView
Define the main ContentView and include a button to toggle the NavigationDrawer.
XAML

 <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" >
    ......
   <navigationdrawer:SfNavigationDrawer.ContentView>
      <Grid x:Name="mainContentView" 
            BackgroundColor="White" 
            RowDefinitions="Auto,*">
          <HorizontalStackLayout BackgroundColor="#6750A4" Spacing="10" Padding="5,0,0,0">
              <ImageButton x:Name="hamburgerButton"
                           HeightRequest="50"
                           WidthRequest="50"
                           HorizontalOptions="Start"
                           Source="hamburgericon.png"
                           BackgroundColor="#6750A4"
                           Clicked="hamburgerButton_Clicked"/>
                    <Label x:Name="headerLabel" 
                           HeightRequest="50" 
                           HorizontalTextAlignment="Center" 
                           VerticalTextAlignment="Center" 
                           Text="Home" FontSize="16" 
                           TextColor="White" 
                           BackgroundColor="#6750A4"/>
          </HorizontalStackLayout>
                    <Label Grid.Row="1" 
                           x:Name="contentLabel" 
                           VerticalOptions="Center" 
                           HorizontalOptions="Center" 
                           Text="Content View" 
                           FontSize="14" 
                           TextColor="Black"/>
       </Grid>
  </navigationdrawer:SfNavigationDrawer.ContentView>
  </navigationdrawer:SfNavigationDrawer>

Is Open property:
The IsOpen property can be set to open or close the drawer programmatically.

XAML

 private void hamburgerButton_Clicked(object sender, EventArgs e) 
 {            
     navigationDrawer.IsOpen = !navigationDrawer.IsOpen;            
 }

Output

ToggleDrawer method:
Implement a button click event handler to toggle the drawer.
C#

private void hamburgerButton_Clicked(object sender, EventArgs e) {
      navigationDrawer.ToggleDrawer();
  }

Output

The EnableSwipeGesture property can be used to enable or disable the swipe functionality in the NavigationDrawer.

XAML

<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationdrawer:SfNavigationDrawer.DrawerSettings>
        <navigationdrawer:DrawerSettings EnableSwipeGesture="True">
        </navigationdrawer:DrawerSettings>
    </navigationdrawer:SfNavigationDrawer.DrawerSettings>
</navigationdrawer:SfNavigationDrawer>

Output

Sample
GitHub

Conclusion
I hope you enjoyed learning how to toggle the Navigation Drawer in .NET MAUI.

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 following comments section if you have any queries or require clarifications. 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!