--- title: "Introducing the .NET MAUI Navigation Drawer Control" published_at: "2023-12-26T12:19:54+00:00" modified_at: "2026-02-10T13:25:51+00:00" url: "https://www.syncfusion.com/blogs/post/dotnet-maui-navigation-drawer" excerpt: "This blog explains the features of the new Syncfusion .NET MAUI Navigation Drawer control added in the 2023 Volume 4 release." taxonomy_category: - ".NET MAUI" - "Desktop" - "Mobile" - "Syncfusion" - "UI" - "What's new" taxonomy_post_tag: - ".NET MAUI" - "desktop" - "MAUI" - "Mobile" - "What's New" --- # Introducing the .NET MAUI Navigation Drawer Control [Naveenkumar Sanjeevirayan](https://www.syncfusion.com/blogs/author/naveenkumar-sanjeevirayan) ![Introducing the .NET MAUI Navigation Drawer Control](https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Introducing-the-.NET-MAUI-Navigation-Drawer-Control.png) We are excited to announce the latest addition to our Syncfusion [.NET MAUI](https://www.syncfusion.com/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) . The [.NET MAUI Navigation Drawer](https://www.syncfusion.com/maui-controls/maui-navigationdrawer) 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. ### Drawer position 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. | Left | Right | | --- | --- | | Bottom | Top | *Customizing Drawer Position in .NET MAUI Navigation Drawer* ### Animated transition 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. | Slide on top | | Pull | | --- | --- | --- | | | | | ![Reveal Navigation Transition](https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Reveal-Navigation-Transition.gif) Reveal *Custom Animated Transitions in .NET MAUI Navigation Drawer* ### Customizing animation duration 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. ### 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**. ### Set main content 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. ![Setting Main Content in .NET MAUI Navigation Drawer](https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Setting-Main-Content-in-.NET-MAUI-Navigation-Drawer.png) Setting Main Content in .NET MAUI Navigation Drawer ### Set side-pane content 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. ![Setting Side-pane Content in .NET MAUI Navigation Drawer](https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Setting-Side-pane-Content-in-.NET-MAUI-Navigation-Drawer.png) Setting Side-pane Content in .NET MAUI Navigation Drawer **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 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) ### Step 2: Add the required NuGet package Syncfusion .NET MAUI controls are available on the [NuGet Gallery.](https://www.nuget.org/) Open the **NuGet package manager** in [Visual Studio.](https://visualstudio.microsoft.com/) 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. ``` 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() .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. ``` 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. ``` ``` ### 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. ``` ``` After executing the previous code examples, you’ll get the output shown in the following image. ![Integrating Navigation Drawer Control in .NET MAUI App](https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Integrating-Navigation-Drawer-Control-in-.NET-MAUI-App.gif) Integrating Navigation Drawer Control in .NET MAUI App ## 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) ## 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) 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) 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) and [What’s New](https://www.syncfusion.com/products/whatsnew) 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) to start evaluating them immediately. If you have any questions, contact us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/) . 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) - [Introducing the New .NET MAUI Sunburst Chart Control](https://www.syncfusion.com/blogs/post/dotnet-maui-sunburst-chart.aspx) - [Introducing the New .NET MAUI Switch Control](https://www.syncfusion.com/blogs/post/dotnet-maui-switch-control.aspx) - [What’s New in 2023 Volume 4: .NET MAUI Charts](https://www.syncfusion.com/blogs/post/dotnet-maui-charts-2023-volume-4.aspx)