Skip to content

Creating a hamburger menu in Xamarin.Forms

Amazon Hamburger Menu
Source: Amazon iOS App (Amazon.com)

One of the most common navigation design patterns for applications and websites is none other than the hamburger menu. While the effectiveness of this type of navigation is greatly debated in the industry, no one can dispute that consumers have, for better or worse, acclimated to these menus. Many of the bigger players in the industry have utilized these menus within their applications (e.g. Amazon, Facebook, Google… to name a few).

Regardless of which side of the fence you are on, implementing a hamburger menu is dead simple in Forms. Xamarin has cleverly disguised their implementation as “Master-Detail Page.”

To create a hamburger menu:

1. Add a new class to your project called: MenuPage
2. Have MenuPage inherit from ContentPage
// TODO: Customize the MenuPage to your heart’s content (with navigation logic, Buttons, ListViews, Labels, etc).

3. Add a second new class to your project called: HomePage (call it whatever)
4. Have HomePage also inherit from ContentPage

5. Add a third new class to your project called: RootPage
6. Have the new class inherit from MasterDetailPage

7. In the constructor of App.xaml.cs, create a new instance of RootPage
8. Create a new instance of MenuPage
9. Assign MenuPage to the Master property of RootPage
10. In the same constructor, create a new instance of a NavigationPage, add a new instance of HomePage as the argument for the NavigationPage
11. Assign the instance of NavigationPage to the Detail property of RootPage

The NavigationPage becomes your navigation stack. Therefore, if you want to push a new page onto the stack (from your MenuPage), simply call:

App.NavigationPage.Navigation.PushAsync(PAGE)

Or pop a page off the stack (from your MenuPage):

App.NavigationPage.Navigation.PopAsync()

To replace the HomePage with another page:

Xamarin will automatically provide a hamburger menu button within your navigation bar. I have found the default navigation bar to be a royal pain to customize. My recommendation would be to implement your own custom header bar. If you do create a custom header, simply call RootPage.IsPresented = true; to open the menu drawer. Set it to false to close it.

// UPDATE: as requested, here is an example project

Published inDesign PatternsFormsNavigationUIXamarin
  • Dwight Hyde

    Do you have a project file you could provide for this example?

  • @dwight_hyde:disqus I have this in a production project, not an example project. I can send you an example project this evening if you would like?

    • Dwight Hyde

      That would be awesome Thomas. Much appreciated.

      • As promised. Let me know if you need further help. https://github.com/twolfprogrammer/Xamarin.Forms-Hamburger-Menu-Example

        • Dwight Hyde

          Rock on Thomas. Downloaded it and works as advertised. Thank you so much!!

          • Awesome! Glad that helped. I would definitely recommend creating a global navigation service rather than exposing the NavigationPage within the App code behind. See this post if you are interested: https://wolfprogrammer.com/2016/07/22/navigation-using-mvvm-light/

          • dg78

            Hi Thomas,

            I don’t understand your last answer: “I would definitely recommend creating a global navigation service rather than exposing the NavigationPage within the App code behind.”. Could you explain why ?

            In your code, in App code behind, you wrote :
            “// TODO: wrap in a global Navigation Service (for example purposes only)”

            Have you do this TODO ?
            If I understand: the global Navigation Service is inside the Mvvm Light ?
            Have you a sample code for hamburger menu with Mvvm light ?

            Thanks

          • Hey, sorry for the REALLY delayed reply (you caught me during a pretty busy time of the year). Your assumption is correct, I use Mvvm Light for my global navigation. I do not have a sample project showing how to do this, but you can look at another one of my posts which explains how: https://wolfprogrammer.com/2016/07/22/navigation-using-mvvm-light/

  • Narcisse Adjalla

    1- How to replace the HomePage with another page ?
    The code you provide do not change the page and to not close the menu either.

    2- PushAsync(PAGE) do not close the menu. So how to close the menu ?

    • Narcisse Adjalla

      I find my mistake. I use the following lines and everything is ok.

      var otherPage = new OtherPage();
      var homePage = App.NavigationPage.Navigation.NavigationStack.First();
      App.NavigationPage.Navigation.InsertPageBefore(otherPage, homePage);
      App.NavigationPage.PopToRootAsync(false);
      App.NavigationPage = new NavigationPage(otherPage);
      App.RootPage.Detail = App.NavigationPage;
      App.RootPage.IsPresented = false;

  • abrasat

    First of all thank you for the very useful sample.
    Could you please explain where in the sample code is “hidden” the image file with the symbol for the hamburger menu (hamburger.png ?)

  • Fernando Silva

    Thanks for the example project =]

  • TheHeraknos

    Hey, do you have an example of a custom header bar with a MasterDetailPage ?

  • Bhairitu

    Nice example. BTW, do you have any idea how to use a ListView instead of buttons for the menu? There is an example but it can only load pages. Your solution with ICommand allows for modifying pages before loading, modifying the current display page data or just performing some code like saving data. So far I have not found any tricks that will let a ViewCell work with Command like it does with a button and I don’t want to use a button in the cell. And it’s been a discussed problem on the Xamarin forum.

  • jingsong zhang

    the simplest way is to use button with Ascii character “≡”, you can enter by using ALT+240.

    I tested it works.

  • Bhairitu

    On a portrait layout the menu closes by clicking outside of it but on a tablet in landscape mode it doesn’t. You have to slide it back. Haven’t found a solution so far.

    • Bhairitu

      This appears to be a bug in Xamarin. I’ll check to see if it has been reported. If you click to the far right on a tablet the menu closes like it does on a phone. Looks like they didn’t think about checking for the entire space to the right of the menu on a tablet, just the space that would be on a phone.

  • Jesse Liberty

    In my program and your sample, on iOS if you navigate off of page 1 (e.g., to page 2 and then page 3) the pages do not have the “menu” and there is no way to go back. Is this a new bug? Is there a work-around? (Things work fine in Android)
    Thanks.