How to handle the Drill Down Navigation for Responsive Application on Mobile?

Question

I am working on a Responsive Web App. It provides summary across different verticals. To view details of a vertical user can drill down. So far the drill down goes till level 5. The Navigation for drill down within a vertical is a variation of a Breadcrumb.

Now, the need is to make changes so that the web app works fine on Mobile devices as well.

I found something similar on StackExchange Is there a better solution than breadcrumbs to cascading categories on mobile?

But I need something more.. Also, how should I proceed with the change?

[Edit 1 - Added Image]

[Edit 2 - Added Possible Solution] Breadcrumb menu does seem a rational option.

Answer 1

What you need to do is hiding the breadcrumbs while still having them accessible on mobile. There are three patterns I think you might be interested in:

1. Displaying only the previous level. Here's a responsive example: http://codepen.io/bradfrost/full/dKulf

2. Displaying breadcrumbs as a dropdown. A responsive example again: http://codepen.io/bradfrost/full/DCgax

3. Letting them fall down - the least elegant way, but may be handy in some project-specific situations. And example again: http://codepen.io/bradfrost/full/IcoLu

(Resize your browser window to see how the examples work.)

You can combine the first two with always displaying the very first level (to let your users access the top level more easily), e.g.:

• [Top level] [Dropdown]
• [Top level] ... [Previous level]

This is because I think that users will most often want to go bact to top and one level up - but this may be project specific as well.