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

The .NET MAUI Navigation Drawer can be toggled 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 Navigation Drawer.

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
Include a button to toggle the Navigation Drawer.

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 programmatically open or close the drawer.

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

SwipeGesture:

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

XAML

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

Output

Sample
Download the complete sample from 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. 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 comments section if you have any queries or require clarification. 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!