Skip to content

Category: Navigation

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