How to navigate to a page in .NET MAUI Navigation Drawer (SfNavigationDrawer)?

This article explains how to navigate from one page to another using the NavigationDrawer in .NET MAUI. Follow the steps outlined below to implement navigation in your MAUI project.

Step 1: Set up the NavigationDrawer
Create the NavigationDrawer with all necessary components such as DrawerHeaderView, DrawerContentView and ContentView.

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"
                      ItemSelected="OnItemSelected">
                        <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.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>
                <StackLayout Grid.Row="1">                 
                    <Button Text="Next_Page"                            
                        VerticalOptions="CenterAndExpand"
                        HorizontalOptions="CenterAndExpand"
                        Clicked="Button_Clicked" />
                </StackLayout>
            </Grid>
        </navigationdrawer:SfNavigationDrawer.ContentView>
    </navigationdrawer:SfNavigationDrawer>
    

Step 2: Handle the button click events
Define the functionality for both the hamburger button and the navigation button.

 private void hamburgerButton_Clicked(object sender, EventArgs e) 
 {
     navigationDrawer.ToggleDrawer();
 }
 
 private async void Button_Clicked(object sender, EventArgs e) 
 {
      await Navigation.PushAsync(new NewPage());
 }

Step 3: Create a New Page
Create the new page that you want to navigate to.

<ContentPage>
 <VerticalStackLayout>
     <Label Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
 </VerticalStackLayout>
 </ContentPage>

Output

Download the complete sample in GitHub

Conclusion

Hope you enjoyed learning about how to navigate to a page in .NET MAUI NavigationDrawer.

You can refer to our .NET MAUI NavigationDrawer’s feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI NavigationDrawer documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI NavigationDrawer and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our Support Forums, Direct-Trac, or Feedback Portal. We are always happy to assist you!