MasterDetailPage Navigation Menu in Xamarin.Forms

One of the most common forms of navigation in an Xamarin.Forms application, is by the MasterDetailPage. This also may be referred to as the Flyout Menu, SlideOut Menu or Navigation Drawer. A hidden panel is kept out to the side of the screen and then via a button tap, or a right swipe, it will appear.

If you want to follow along in the code, have a look at my sample Github repo, NavigationMenu.

Creating MasterDetailPage

While you can create a MasterDetailPage in XAML, it’s normally easier to establish this in code. It is comprised of a Master Page, which is the menu, and a Detail page, which will have your main app pages. In the Detail page, it is normally common to have a NavigationPage as the root control, to allow navigation within the Detail page.

MainPage = new MasterDetailPage()
    Master = new MasterPage() { Title = "Main Page" },
    Detail = new NavigationPage(new PageOne())

You must set a Title, on your Master page. Note, that MasterPage() and PageOne() are just ContentPage’s I created myself in the project. You can call these whatever you want.

Adding Navigation Items

Now we get to add navigation links to our Master page. There are numerous options here. You can use a ListView, if you desire, however I find it easier to create a new control, and use a StackLayout. These navigation items are static in most apps, and a ListView is designed for dynamically loaded data.

Let’s create a NavigationItem control. You will also notice I use Iconize, with the FontAwesome module, for the icons.

<?xml version="1.0" encoding="UTF-8"?>
<Grid xmlns="" 
        <ColumnDefinition Width="50" />
        <ColumnDefinition Width="*" />
    <iconize:IconImage Grid.Column="0" Icon="{Binding Icon, Source={x:Reference this}}" IconColor="Gray" IconSize="22" />
    <Label Text="{Binding Text, Source={x:Reference this}}" Grid.Column="1" />
        <TapGestureRecognizer Command="{Binding Command, Source={x:Reference this}}" CommandParameter="{Binding CommandParameter, Source={x:Reference this}}" />

You will notice that this control has bindable properties. We need to create 4 bindable properties. Instead of showing the code in the post, have a look at NavigationItem.xaml.cs on Github.

Setting Our Navigation Items

In our Master page, we now want to add some navigation items. Here is an example of 2 NavigationItems, with a profile image header. For the rounded image, I used Circle Image Control.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns=""
        <Grid BackgroundColor="Transparent">
                <RowDefinition Height="200" />
                <RowDefinition Height="*" />
                <Image Source="bg.png" Aspect="AspectFill" />
                <StackLayout Padding="0,20,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
                    <controls:CircleImage BorderColor="White" BorderThickness="2" Source="profile.png" Aspect="AspectFill" WidthRequest="85" HeightRequest="85" />
                    <Label Text="Adam Pedley" TextColor="White" FontSize="Large" />
            <StackLayout Margin="20,20,20,0" Grid.Row="1" Spacing="15">
                <local:NavigationItem Text="Page One" Icon="fa-archive" Command="{Binding NavigationCommand}" CommandParameter="1" />
                <ContentView HeightRequest="1" BackgroundColor="Gray" />
                <local:NavigationItem Text="Page Two" Icon="fa-cog" Command="{Binding NavigationCommand}" CommandParameter="2" />

In your ViewModel, or page, bind the Command to a method that will navigate as desired. You can see here, I used CommandParameter to differentiate each item, so that you only need to create one command, and can then perform a switch based on the value.

Warning: Hiding navigation in a side menu, can cause a drop in user engagement. Ensure the main screen’s in your app, are accessible via the top or bottom toolbar, and the side navigation is used for screen’s that you need to give access to, but are not essential to the user experience.


  1. Shimmy Weitzhandler

    Was worth coming here even only to learn about the `{x:Reference this}` in your code! I didn’t know that exists and always had to name the parent container!

  2. Anurag

    Hi Mr. Adam,

    Your blog is always been a fantastic read for me and i try to replicate most of your tutorials into different samples. During my implementation of the navigation menu, i am able to add the menu very well into my application but rather than Starting the page PageOne with navigation , i want to start the application from login (Set already from app.xaml.cs via MainPage = new Login();) but now when i am logging into the application i am not sure how can i render the Navigation menu on my page after Login.

    I will appreciate your quick help/response.


  3. Liem

    On Windows PC Humberger Menu icon will lost after navigation, But it’s working fine on Lumia Phone. What happend? How to fix

  4. Biren Patel


    How can I get the menu to SLIDE OVER the details page in iOS. Right now it shows up under the details page when you slide right. I want it to go over the details page. Like UBER menu

  5. pedro

    When I add the navigation items to my master detail page, for some reason the bindable property of type ICommand does not get executed. Every other bindable properties (icon, title ..) work just fine. My guess is that the grid gesture recognizer does not get fired. How can I narrow down the issue and fix it?
    P.s. I am using MVVM pattern (prism) if it has any impact?

    1. Adam Pedley

      To remove a navigation bar, all you need to do is NavigationPage.SetHasNavigationBar(this, false); inside the page you want to remove the NavigationBar from.

      1. James

        By navigation bar. I mean the navigation bar on top of the side menu, which covers the top portion of the image and shows a back arrow when the menu is open. Not the whole navigation bar on top of each page.

  6. mcfer

    Hello…thanks for the example.

    You wrote here Source=”bg.png” on Image, but the Image is .jpg … In .android works anyway.
    But, when i tried the .ios , I saw that you dont have this image on the Resources folder. So, i putted in mine, but don´t worked. With .png or .jpg .
    I don´t know why 🙁

    May you help me.

    1. Adam Pedley

      Oops, my mistake. Change the XAML to .jpg to match the image. In the Resources folder, make sure the build action is BundleResource.

      Then clean the project, delete from the phone or simulator, then run it again.

  7. Andrew

    How can I implement an item selected color behaviour, where the selected item would change its background color on tap event?

    It is easy to add a box view behind other controls and change its background on TapGestureRecognizer tapped event. However, I am not sure, when to reset the color to default color.