Trusted by the world’s leading companies
Overview
The Xamarin.Forms Navigation Drawer control is an interactive panel that emerges from the edge of the window and allows you to store content in a hidden panel.
Secondary drawer
Xamarin.Forms Navigation Drawer support secondary drawer that can provide another set of Menu or Notification to the app.

Slide Positions
The position feature can be used to customize the position of the drawer. The drawer can be placed at the left, right, top, and bottom positions.

Left position
The Xamarin.Forms Navigation Drawer placed at the left side of the screen.

Right position
The Xamarin.Forms Navigation Drawer placed at the right side of the screen.

Top position
The Xamarin.Forms Navigation Drawer is placed at the top of the screen.

Bottom position
The Xamarin.Forms Navigation Drawer is placed at the bottom of the screen.
Transition
The transition feature can be used to customize the animation of the drawer.

Push
This transition pushes the main content.

Reveal
In this transition, the main content reveals the drawer.

Slide on top
In this transition, the drawer slides on the main content.
Drawer header view
The Xamarin.Forms Navigation Drawer supports the header view.

Drawer footer view
The Xamarin.Forms Navigation Drawer supports the footer view.

Xamarin.Forms Navigation Drawer Code Example
Easily get started with the Xamarin.Forms Navigation Drawer using a few simple lines of C# code example as demonstrated below. Also explore our Xamarin.Forms Navigation Drawer Example that shows you how to render and configure the Navigation Drawer for Xamarin.Forms.
<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer"
DrawerWidth ="200"
DrawerHeaderHeight="160">
<navigationdrawer:SfNavigationDrawer.ContentView>
<Grid x:Name="mainContentView"
BackgroundColor=“Blue”/>
</navigationdrawer:SfNavigationDrawer.ContentView>
<navigationdrawer:SfNavigationDrawer.DrawerHeaderView>
<Grid BackgroundColor="#1aa1d6">
<Label Text=“Header”
HorizontalTextAlignment="Center"
HorizontalOptions="Center"
FontSize="20"
TextColor="White"/>
</Grid>
</navigationdrawer:SfNavigationDrawer.DrawerHeaderView>
<navigationdrawer:SfNavigationDrawer.DrawerContentView>
<Grid BackgroundColor="#1aa1d6">
<Label Text=“Drawer” ContentView
HorizontalTextAlignment="Center"
HorizontalOptions="Center"
FontSize="20"
TextColor="White"/>
</Grid>
</navigationdrawer:SfNavigationDrawer.DrawerContentView>
<navigationdrawer:SfNavigationDrawer.DrawerFooterView>
<Grid BackgroundColor="#1aa1d6">
<Label Text=“Footer”
HorizontalTextAlignment="Center"
HorizontalOptions="Center"
FontSize="20"
TextColor="White"/>
</Grid>
</navigationdrawer:SfNavigationDrawer.DrawerFooterView>
</navigationdrawer:SfNavigationDrawer>using Syncfusion.SfNavigation Drawer.XForms;
using Xamarin.Forms;
namespace GettingStarted
{
public class App : Application
{
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer()
{
DrawerWidth = 200
};
Grid grid = new Grid();
navigationDrawer.ContentView = grid;
this.Content = navigationDrawer;
}
}Not sure how to create your first Xamarin Navigation Drawer? Our documentation can help.
I’d love to read it now150+ XAMARIN UI CONTROLS
-
Xamarin.Forms
-
Xamarin.Android
-
Xamarin.iOS
-
GRIDSDATA VISUALIZATIONNAVIGATIONEDITORSLAYOUTPROJECT MANAGEMENTNOTIFICATIONDOCUMENT PROCESSING LIBRARIESVIEWER/EDITORMISCELLANEOUSCHAT
-
GRIDSDATA VISUALIZATIONNAVIGATIONEDITORSLAYOUTPROJECT MANAGEMENTNOTIFICATIONVIEWER/EDITORDOCUMENT PROCESSING LIBRARIESMISCELLANEOUS
-
GRIDSDATA VISUALIZATIONNAVIGATIONEDITORSLAYOUTPROJECT MANAGEMENTNOTIFICATIONVIEWER/EDITORDOCUMENT PROCESSING LIBRARIESMISCELLANEOUS
Frequently Asked Questions
Why should you choose Syncfusion Xamarin Navigation Drawer?
- Supports two different menus at the same time.
Supports positioning drawer on all four sides.
Supports opening and closing of drawer with the transitions SlideOnTop, Push and Reveal.
- Lets users update touch threshold based on their device screen size.
- Supports both header and footer views with customized size.
- One of the best Xamarin Navigation Drawer in the market that offers feature-rich UI to interact with the software.
Offers extensive demos, documentation to learn quickly and get started with the Xamarin Navigation Drawer Control.
Where can I find the Syncfusion Xamarin Navigation Drawer demo?
You can find our Xamarin Navigation Drawer demo here.
Can I download and utilize the Syncfusion Xamarin Navigation Drawer for free?
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.
How do I get started with Syncfusion Xamarin Navigation Drawer?
A good place to start would be our comprehensive getting started documentation.
Our Customers Love Us
Awards
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.