How to Navigate to a Page in .NET MAUI Navigation Drawer?

This article explains how to navigate from one page to another using the .NET MAUI NavigationDrawer. 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

I hope you enjoyed learning about how to navigate to a page in .NET MAUI Navigation Drawer.

You can refer to our .NET MAUI NavigationDrawer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI NavigationDrawer example to understand how to create and manipulate data.
For current customers, you can check out our 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 other controls.

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!