9

I am looking for examples or guidelines how to design tree navigation in material design. The style guide covers data tables and lists but trees are not mentioned. The only reference are nested submenus which don't scale well to multiple levels and are difficult to navigate. I suppose that tree view should be avoided but some applications, such as file browser focus on hierarchic content.

I'd be interested in different applications for inspiration but my main use case is selection of a concept in a scientific classification or taxonomy. To give some examples:

All examples have in common a possibly large number of levels. My idea so far is to collapse the lineage (from root to parent to current node) in one list and show child nodes in another list below:

cellular organisms      # root
...25...                # indicate lineage, expandable
Catarrhini              # parent
----------------------
Hominoidea              # current
----------------------
Hominidae (great apes)  # child
Hylobatidae (gibbons)   # child
----------------------

For very small displays this is probably the only reasonable view but my if space permits (e.g. full tablet size) I'd like to show more levels, so I end up with a classical tree view again:

----------------------
Hominoidea            
----------------------
Hominidae (great apes)
  Homininae
  Ponginae
Hylobatidae (gibbons) 
  Hoolock
  Hylobates
  Nomascus
  Symphalangus
----------------------

The Tree of Life Taxonomy example given above is fine but would need to be adjusted for material design. The current Material Design Guidelines do not refer to hierarchical navigation apart from menus which are displayed and used differently.

2
  • The question is a bit vague, and rather too broad. Can you show us your ideas so far? How many levels of navigation are you planning on? Is this tree view for finding files, or wiki pages, or web pages? Dec 15, 2015 at 10:55
  • I extended the question with some examples and ideas.
    – Jakob
    Dec 15, 2015 at 12:46

2 Answers 2

8

Consider panels that come out from underneath each other to reflect the hierarchy in dimensions. The top is some major classification that you can still trace back. As you go deeper into the hierarchy previous panels slip off to the left. You can go back up the tree by swiping them back to the right.

When you finally hit on an option that has no more classifications below it, that information is displayed full screen and its title is at the top. Hitting the back arrow then produces the panels to swipe backward.

enter image description here

In this example there is a lot of white space, but other panels would have more content.

2

I would suggest using megamenu dropdowns, because they are a good way of displaying information hierarchically. They are also a good fit with material design, in that they can be made to look like an additional "piece of material" laid on top of the page.

When styling them for use on smaller screens, you can make them less complex (gracefully degrade them), as suggested in the answer to this question below.

What is a good alternative to drop-down menus for site navigation on touch-screen/mobile devices?

4
  • Please don’t add just a link as answer to a question. If the link breaks, the answer you provided will not be useful for future visitors. Provide an answer of your own and use the link as reference. If needed, you can block quote the content from your link. More information is found in our help center, especially How do I write a good answer Dec 16, 2015 at 14:00
  • OK, thanks for the feedback. I have edited my suggestion. Dec 18, 2015 at 9:52
  • @YvonneAburrow thanks for your answer! You you provide a link, description, or example of "megamenu" or does this just refer to a large menu?!
    – Jakob
    Dec 21, 2015 at 8:07
  • There is a link in the article I linked to but here you are, this is the classic article about megamenus: nngroup.com/articles/mega-menus-work-well Dec 22, 2015 at 9:13

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.