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.
Xamarin.Forms Navigation Drawer support secondary drawer that can provide another set of Menu or Notification to the app.
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 placed at the left side of the screen.
The Xamarin.Forms Navigation Drawer placed at the right side of the screen.
The Xamarin.Forms Navigation Drawer is placed at the top of the screen.
The Xamarin.Forms Navigation Drawer is placed at the bottom of the screen.
The transition feature can be used to customize the animation of the drawer.
This transition pushes the main content.
In this transition, the main content reveals the drawer.
In this transition, the drawer slides on the main content.
The Xamarin.Forms Navigation Drawer supports the header view.
The Xamarin.Forms Navigation Drawer supports the footer view.
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;
}
}
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.
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.