How to add .NET MAUI Navigation Drawer inside the tabbed page?

This article explores how to add Syncfusion .NET MAUI NavigationDrawer inside the Tabbed Page.

Step 1: Create a Tabbed Page with Two Tab Items

Prepare the Tabbed Page with two tab items, named First Page and Second Page. Add the Navigation Drawer to each page.

XAML

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="NavigationDrawerTabbed.TabbedPageWithNavigationDrawer"
            xmlns:navigationdrawer="clr-namespace:Syncfusion.Maui.NavigationDrawer;assembly=Syncfusion.Maui.NavigationDrawer"
            Title="TabbedPageWithNavigationDrawer">
  <NavigationPage Title="First Page">
      <x:Arguments>
          <ContentPage>
          <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer1">
              <navigationdrawer:SfNavigationDrawer.DrawerSettings>
                  <navigationdrawer:DrawerSettings DrawerWidth="200"
                                                   TouchThreshold="100"
                                                   DrawerHeaderHeight="50"
                                                   DrawerFooterHeight="50">
                      <!-- Drawer Header View -->
                      <!-- ... -->
                          <navigationdrawer:DrawerSettings.DrawerContentView>
                              <Grid>
                                  <Label Text="Content View" FontSize="14" TextColor="Black"  VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                              </Grid>
                          </navigationdrawer:DrawerSettings.DrawerContentView>
                      <!-- Drawer Footer View -->
                      <!-- ... -->
                  </navigationdrawer:DrawerSettings>
              </navigationdrawer:SfNavigationDrawer.DrawerSettings>

              <navigationdrawer:SfNavigationDrawer.ContentView>
                  <Grid x:Name="mainContentView1" 
    BackgroundColor="White" RowDefinitions="Auto,*">
                      <HorizontalStackLayout BackgroundColor="#6750A4" Spacing="10" Padding="5,0,0,0">
                          <ImageButton x:Name="hamburgerButton1"
                       HeightRequest="50"
                       WidthRequest="50"
                       HorizontalOptions="Start"
                       Source="hamburgericon.png"
                       BackgroundColor="#6750A4"
                       Clicked="hamburgerButton1_Clicked"/>
                          <Label x:Name="headerLabel"
                                 HeightRequest="50"
                                 HorizontalTextAlignment="Center"
                                 VerticalTextAlignment="Center"
                                 Text="Home" FontSize="16"
                                 TextColor="White"
                                 BackgroundColor="#6750A4"/>
                      </HorizontalStackLayout>

                      <Label Grid.Row="1"
                             Text="First Page"
                             VerticalOptions="Center"
                             HorizontalOptions="Center" />
                  </Grid>
              </navigationdrawer:SfNavigationDrawer.ContentView>
          </navigationdrawer:SfNavigationDrawer>
          </ContentPage>
      </x:Arguments>
  </NavigationPage>
  <NavigationPage Title="Second Page">
      <x:Arguments>
          <ContentPage>
              <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer2">
                  <navigationdrawer:SfNavigationDrawer.DrawerSettings>
                      <navigationdrawer:DrawerSettings DrawerWidth="150"
                                                       TouchThreshold="100"
                                                       DrawerHeaderHeight="100"
                                                       DrawerFooterHeight="100">
                          <!-- Drawer Header View -->
                          <!-- ... -->
                          <navigationdrawer:DrawerSettings.DrawerContentView>
                              <Grid>
                                  <Label Text="Content View" FontSize="14" TextColor="Black"  VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                              </Grid>
                          </navigationdrawer:DrawerSettings.DrawerContentView>
                         <!-- Drawer Footer View -->
                         <!-- ... -->
                      </navigationdrawer:DrawerSettings>
                  </navigationdrawer:SfNavigationDrawer.DrawerSettings>

                  <navigationdrawer:SfNavigationDrawer.ContentView>
                      <Grid x:Name="mainContentView2" 
BackgroundColor="White" RowDefinitions="Auto,*">
                          <HorizontalStackLayout BackgroundColor="#6750A4" Spacing="10" Padding="5,0,0,0">
                              <ImageButton x:Name="hamburgerButton2"
                                           HeightRequest="50"
                                           WidthRequest="50"
                                           HorizontalOptions="Start"
                                           Source="hamburgericon.png"
                                           BackgroundColor="#6750A4"
                                           Clicked="hamburgerButton2_Clicked"/>
                              <Label x:Name="headerLabel2"
                                     HeightRequest="50"
                                     HorizontalTextAlignment="Center"
                                     VerticalTextAlignment="Center"
                                     Text="Home" FontSize="16"
                                     TextColor="White"
                                     BackgroundColor="#6750A4"/>
                          </HorizontalStackLayout>

                          <Label Grid.Row="1"
                                 Text="Second Page"
                                 VerticalOptions="Center"
                                 HorizontalOptions="Center" />
                      </Grid>
                  </navigationdrawer:SfNavigationDrawer.ContentView>
              </navigationdrawer:SfNavigationDrawer>
          </ContentPage>
      </x:Arguments>
  </NavigationPage>
</TabbedPage>

C#

private void hamburgerButton1_Clicked(object sender, EventArgs e)
{
    navigationDrawer1.ToggleDrawer();
}

private void hamburgerButton2_Clicked(object sender, EventArgs e)
{
    navigationDrawer2.ToggleDrawer();
}

Step 2: Create the button to navigate to the Tabbed Page

Initialize the button with the Clicked event to navigate to the Tabbed Page.

XAML

<Button Text="Go to Tabbed Pages" 
        Clicked="OnButtonClicked"
        HorizontalOptions="Center"/>

C#

private async void OnButtonClicked(object sender, EventArgs e)
{
    await Navigation.PushAsync(new TabbedPageWithNavigationDrawer());
}

Output
Navigation drawer with the TabbedPage:

Sample
You can download the GitHub sample

Conclusion

Hope you enjoyed learning about how to add .NET MAUI Navigation Drawer inside the tabbed page.

You can refer to our .NET MAUI Navigation Drawer’s 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, 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 Navigation Drawer 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!