Tree navigation in material design

Question

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:

• Tree of Life Taxonomy

• Medical Subject Headings

• Regensburger Verbundklassifikation

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.

Answer 1

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.

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

Answer 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?