Introducing the .NET MAUI Navigation Drawer Control
Tags: dotnetmaui, mobile, syncfusion, ui
Published: 2024-01-18 10:53:17

---
title: Introducing the .NET MAUI Navigation Drawer Control
published: true
date: 2023-12-26 12:19:54 UTC
tags: dotnetmaui, mobile, syncfusion, ui
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-navigation-drawer.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3hydkqxka93gc7x2zp2.png
---
We are excited to announce the latest addition to our Syncfusion [.NET MAUI](https://www.syncfusion.com/maui-controls ".NET MAUI controls") toolkit: the **Navigation Drawer** control in [Essential Studio 2023 Volume 4](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4").

The [.NET MAUI Navigation Drawer](https://www.syncfusion.com/maui-controls/maui-navigationdrawer ".NET MAUI Navigation Drawer Control") is a control designed to facilitate the creation of a navigation pane in an application. Comprising a content area and a sliding pane, this control can be effortlessly opened either by swiping the edges of the screen or through programmatic invocation.

Let’s explore the features of the new .NET MAUI Navigation Drawer control and the steps to get started with it.

## Key features

The .NET MAUI Navigation Drawer control provides support for the following key features:

- [Drawer position](#Drawer)
- [Animated transition](#Animated)
- [Animation duration](#Animation)
- [Custom drawer size](#custom)
- [Main content](#Main)
- [Side-pane content](#Side)

Let’s take a closer look at these features.

### <a name="Drawer">Drawer position</a>

The Navigation Drawer control offers a variety of options to tailor the location of your navigation drawer to suit your app’s layout. Whether positioned on the left, right, top, or bottom, the Navigation Drawer provides the flexibility to seamlessly adapt to your design preferences.
<table>
<tbody>
<tr style="background: none;">
<td style="width: 50%; border: none !important;"><figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Left-Navigation-Drawer-Position-.NET-MAUI.gif" alt="Left Navigation Drawer Position .NET MAUI" style="width:100%">

  <figcaption>Left</figcaption>

</figure>
</td>
<td style="width: 50%; border: none !important;"><figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Right-Navigation-Drawer-Position.gif" alt="Right Navigation Drawer Position" style="width:100%">

  <figcaption>Right</figcaption>

</figure>
</td>
</tr>
<tr>
<td style="width: 50%; border: none !important;"><figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Bottom-Navigation-Drawer-Position.gif" alt="Bottom Navigation Drawer Position" style="width:100%">

  <figcaption>Bottom</figcaption>

</figure>
</td>
<td style="width: 50%; border: none !important;"><figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Top-Navigation-Drawer-Position.gif" alt="Top Navigation Drawer Position" style="width:100%">

  <figcaption>Top</figcaption>

</figure>
</td>
</tr>
</tbody>
</table>
<figcaption>Customizing Drawer Position in .NET MAUI Navigation Drawer</figcaption>

### <a name="Animated">Animated transition</a>

The Navigation Drawer smoothly glides into view, adding a layer of elegance to your app’s navigation. It allows you to set different animation types by using the **Transition** property.

- **Slide on top** – The navigation pane overlays the main content area when opened.
- **Push** – The navigation pane is hidden. When opened, it will push the main content area on the opposite side up to the width of the drawer.
- **Reveal** – The navigation pane is hidden behind the main content. The main content moves away on the opposite side up to the width of the drawer to show the drawer content.

Refer to the following images.
<table>
<tbody>
<tr style="background: none;">
<td style="width: 50%; border: none !important;"><figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Slide-on-top-Navigation-Transition.gif" alt="Slide on top Navigation Transition" style="width:100%">

  <figcaption>Slide on top</figcaption>

</figure>
</td>
<td style="width: 50%; border: none !important;"> </td>
<td style="width: 50%; border: none !important;"><figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Pull-Navigation-Transition.gif" alt="Pull Navigation Transition" style="width:100%">

  <figcaption>Pull</figcaption>

</figure>
</td>
</tr>
<tr>
<td style="width: 50%; border: none !important;"> </td>
<td style="width: 50%; border: none !important;"> </td>
</tr>
</tbody>
</table>
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Reveal-Navigation-Transition.gif" alt="Reveal Navigation Transition" style="width:100%">

  <figcaption>Reveal</figcaption>

</figure>
<figcaption>Custom Animated Transitions in .NET MAUI Navigation Drawer</figcaption>

### <a name="Animation">Customizing animation duration</a>

You can fine-tune the speed of your animated transitions with customizable animation durations. Adjusting these durations allows you to strike the perfect balance between responsiveness and aesthetics.

### <a name="custom">Customizing drawer size

You have the power to define the size of the sliding pane by using the following properties:

- **DrawerHeight** – It allows you to adjust the height of the side pane when the **Position** is set to **Top** or **Bottom**.
- **DrawerWidth** – It allows you to adjust the width of the side pane when the **Position** is set to **Left** or **Right**.

### <a name="Main">Set main content</a>

You can set the main content of the Navigation Drawer by using the **ContentView** property, which is always visible.

**Note:** Setting the **ContentView** property for NavigationDrawer on initializing is mandatory.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Setting-Main-Content-in-.NET-MAUI-Navigation-Drawer.png" alt="Setting Main Content in .NET MAUI Navigation Drawer" style="width:100%">

  <figcaption>Setting Main Content in .NET MAUI Navigation Drawer</figcaption>

</figure>

### <a name="Side">Set side-pane content</a>

The side-pane content is only viewable when the drawer is in the open state. The side pane contains the following sections:

- **Drawer content** – You can set the drawer content by using the **DrawerContentView** It will be displayed between the header and footer content.
- **Header content** – You can set the header content of the drawer by using the **DrawerHeaderView** property. It will be displayed at the top of the drawer.
- **Footer content** – You can set the footer content of the drawer by using the **DrawerFooterView** property. It will be displayed at the bottom of the drawer.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Setting-Side-pane-Content-in-.NET-MAUI-Navigation-Drawer.png" alt="Setting Side-pane Content in .NET MAUI Navigation Drawer" style="width:100%">

  <figcaption>Setting Side-pane Content in .NET MAUI Navigation Drawer</figcaption>

</figure>

**Note:** For more details, refer to the [.NET MAUI Navigation Drawer documentation.](https://help.syncfusion.com/maui/navigationdrawer/getting-started "Getting started with .NET MAUI Navigation Drawer")

## Getting started with .NET MAUI Navigation Drawer control

You have seen the top features of the .NET MAUI Navigation Drawer control. Now, let’s see how to add it to your app.

### Step 1: Create a .NET MAUI app

First, create a [.NET MAUI application.](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Build your first .NET MAUI App")

### Step 2: Add the required NuGet package

Syncfusion .NET MAUI controls are available on the [NuGet Gallery.](https://www.nuget.org/ "NuGet Gallery") Open the **NuGet package manager** in [Visual Studio.](https://visualstudio.microsoft.com/ "Visual Studio") Search for **Syncfusion.Maui.NavigationDrawer** and then install it.

### Step 3: Register the handler

Register the handler for the Syncfusion core in the **MauiProgram.cs** file.

```csharp
using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;
namespace NavigationDrawerSample
{
  public static class MauiProgram
  {
	public static MauiApp CreateMauiApp()
	{
	   var builder = MauiApp.CreateBuilder();
	   builder
	      .UseMauiApp<App>()
	      .ConfigureSyncfusionCore()
	      .ConfigureFonts(fonts =>
	      {
	         fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
	      });
	   return builder.Build();
        }
   }
}
```

### Step 4: Add the namespace

Add the **Syncfusion.Maui.NavigationDrawer** namespace in your XAML page.

```xml
xmlns:navigationDrawer="clr-namespace:Syncfusion.Maui. NavigationDrawer;assembly=Syncfusion.Maui.NavigationDrawer"
```

### Step 5: Initialize the Syncfusion .NET MAUI Navigation Drawer control

Now, initialize the Syncfusion .NET MAUI Navigation Drawer control. Refer to the following code example.

```xml
<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" />
```

### Step 6: Set the main content and side-pane content

Refer to the following code example to set the main content and side pane content to the Navigation Drawer.

```xml
<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer">
 <navigationdrawer:SfNavigationDrawer.DrawerSettings>
  <navigationdrawer:DrawerSettings DrawerWidth="250"
                                   DrawerHeaderHeight= “160”>
   <navigationdrawer:DrawerSettings.DrawerHeaderView>
    <Grid BackgroundColor="#1aa1d6" RowDefinitions="120,40">
     <Image Source= "user.png"
            HeightRequest= "110"
            Margin="0,10,0,0"
            BackgroundColor="#1aa1d6"
            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="listView_ItemSelected">
     <ListView.ItemTemplate>
      <DataTemplate>
       <ViewCell>
        <VerticalStackLayout HeightRequest="40">
         <Label Margin="10,7,0,0"
                Text="{Binding}"
                FontSize= "16"/>
        </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="#1aa1d6" Spacing="10" Padding="5,0,0,0">
    <ImageButton x:Name="hamburgerButton"
                 HeightRequest= "50"
                 WidthRequest= "50"
                 HorizontalOptions="Start"
                 Source="hamburgericon.png"
                 BackgroundColor="#1aa1d6"
                 Clicked="hamburgerButton_Clicked"/>
    <Label x:Name="headerLabel" 
           HeightRequest= "50" 
           HorizontalTextAlignment= "Center" 
           VerticalTextAlignment= "Center" 
           Text="Home" FontSize="16" 
           TextColor= "White" 
           BackgroundColor="#1aa1d6"/>
   </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>
```

After executing the previous code examples, you’ll get the output shown in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Integrating-Navigation-Drawer-Control-in-.NET-MAUI-App.gif" alt="Integrating Navigation Drawer Control in .NET MAUI App" style="width:100%">

  <figcaption>Integrating Navigation Drawer Control in .NET MAUI App</figcaption>

</figure>

## GitHub references

For more details, refer to the [.NET MAUI Navigation Drawer control demo on GitHub.](https://github.com/SyncfusionExamples/Getting-started-with-.NET-MAUI-NavigationDrawer ".NET MAUI Navigation Drawer control GitHub demo")

## Conclusion

Thanks for reading! In this blog, we’ve explored the features of the new Syncfusion [.NET MAUI Navigation Drawer](https://www.syncfusion.com/maui-controls/maui-navigationdrawer ".NET MAUI Navigation Drawer control") control that rolled out in the [2023 Volume 4](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4") release. You can learn more about the latest .NET MAUI advancements on our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v23.1.36 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New") pages. Try them out and leave your feedback in the comments section below!

Download [Essential Studio for .NET MAUI](https://www.syncfusion.com/downloads/maui "Get free evaluation of Essential Studio for .NET MAUI") to start evaluating them immediately.

If you have any questions, contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to help you!

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 4 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2023-volume-4.aspx "Blog: Syncfusion Essential Studio 2023 Volume 4 Is Here!")
- [Introducing the New .NET MAUI Sunburst Chart Control](https://www.syncfusion.com/blogs/post/dotnet-maui-sunburst-chart.aspx "Blog: Introducing the New .NET MAUI Sunburst Chart Control")
- [Introducing the New .NET MAUI Switch Control](https://www.syncfusion.com/blogs/post/dotnet-maui-switch-control.aspx "Blog: Introducing the New .NET MAUI Switch Control")
- [What’s New in 2023 Volume 4: .NET MAUI Charts](https://www.syncfusion.com/blogs/post/dotnet-maui-charts-2023-volume-4.aspx "Blog: What’s New in 2023 Volume 4: .NET MAUI Charts")