We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted 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.

Xamarin.Forms Navigation Drawer control with secondary drawer


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.

The Xamarin.Forms Navigation Drawer control is positioned at left

Left position

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

The Xamarin.Forms Navigation Drawer control is positioned at right

Right position

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

The Xamarin.Forms Navigation Drawer control is positioned at the top

Top position

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

The Xamarin.Forms Navigation Drawer control is positioned at the bottom

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.

Xamarin.Forms Navigation Drawer control with push transition

Push

This transition pushes the main content.

Xamarin.Forms Navigation Drawer control with reveal transition

Reveal

In this transition, the main content reveals the drawer.

Xamarin.Forms Navigation Drawer control with slide on top transition

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.

Xamarin.Forms Navigation Drawer control with header view


The Xamarin.Forms Navigation Drawer supports the footer view.

Xamarin.Forms Navigation Drawer control with 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;
    }
}



150+ XAMARIN UI CONTROLS

ALL CONTROLS
  • Xamarin.Forms
  • Xamarin.Android
  • Xamarin.iOS
The most downloaded control (based on the nuget.org download count).

Frequently Asked Questions

  • 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.

You can find our Xamarin Navigation Drawer demo here.

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.

A good place to start would be our comprehensive getting started documentation.

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time.
Here are some of their experiences.

Rated by users across the globe

Transform your applications today by downloading our free evaluation version Download Free Trial

Syncfusion Xamarin.Forms Resources

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.

Up arrow icon
Live Chat Icon For mobile