0

The material guidelines say to use a Navigation drawer when you have over 5 main menu items (as opposed to tabs or bottom navigation bar). https://material.io/guidelines/patterns/navigation.html

All examples I've seen have the navigation draw activated from a burger menu on the left side of the top toolbar. Example image...

My issue is that in an app that has a multi-level hierarchy, the burger in that location switches to a back arrow. Is there somewhere else the button should go to make it available on all pages?

I have also seen the kabab menu on the right side of the top toolbar, however this seems to be used more for a contextual menu (actions for the current screen), and not global items?

Improve this question
4
  • Why would you want the burger icon to go someplace else?
    – invot
    Jan 24, 2018 at 16:13
  • I like it up on the left, but the back arrow also needs to go there when you are in a child page (as in the 3rd link in the question).
    – Fred
    Jan 24, 2018 at 21:32
  • I think you need to explain the multi-level hierarchy a bit more before anyone can answer this question. Can you show exactly how you've laid out your navigation?
    – invot
    Jan 25, 2018 at 17:23
  • I can't share my information architecture, but generically speaking, I'd just like to know the preferred navigation pattern for an app with 5+ sections when one or more are 3+ levels deep. How do you access the main navigation and have a back arrow when you are 3 levels deep?
    – Fred
    Jan 30, 2018 at 2:27

2 Answers 2

Reset to default
1

When it comes to navigation patterns in material design something that should always be kept in mind is that their design standards are not inflexible or all-encompassing. They leave a lot up to the developer. There is no solid path on how navigation should be laid out. When it comes to navigation hierarchy, the only real specification is that top-level pages should be displayed more predominantly.

If your concern is about having the hamburger menu icon visible at all times, you might want to consider just rolling your own UI framework. Material design is particular about the icon's usage relative to which page the user's on.

Polymer handles multi-level navigation by having items expand and collapse. If your top-level item isn't actually a page link, this could technically work for you. Otherwise, consider having the sub-pages accessible through tabs. Avoid using the kabob menu as that's meant for things like settings.

If your navigation is simply too complex for this, then consider if material design is right for you. There are plenty of other ways you can construct your menu.

Improve this answer
1

If you absolutely need to have an always-accessible hamburger menu, the Google HIG recommends using an edge swipe to reveal it:

When conflicting gestures are not present, performing an edge swipe from the left reveals off-screen content, such as a navigation drawer.

(It used to be a bit more prescriptive in this recommendation, but I can't find it anywhere else anymore.)

Other than that, consider looking into a bottom navigation bar if you need to keep core primary navigation available at all times (YouTube does this). Perhaps you might not even need a side menu.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.