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 ?