I have a hierarchial menu that is two levels deep. It allows the user to pick from a large number of different categories, which in turn have subcategories.

It is implemented as two screens with the first one displaying the top-level categories and clicking one of these takes the user to a similar screen with the subcategories, as shown in the screenshots.

My problem is, I need some subtle, but clear way to indicate to the user where he/she is in the flow, preferrably with a link to go back to the top-level (it can also be done with the back button)

I tried some different ways, including the breadcrumbs shown in the screenshots.

Is there a common, best-practice-ish way of doing this? If so, how do I make it pretty and easy?

Level 1 Level 2

  • That train just under Offerta.se! Doesn't that solve your problem? It tells where the user is, and those can take the user to the top level! (Am assuming those are links)
    – kBisla
    Commented Jan 21, 2014 at 10:50
  • It solves the problem yes, but I'm not sure if its the best way to do it. My question was more if there is an alternate/better way of doing it?
    – Alex B
    Commented Jan 21, 2014 at 11:20

3 Answers 3


I've found useful for users to first help them understand are deep they are in the navigation by allowing endless nesting of levels on top of each others. Like a deck of cards: levels

You can personalize the back button to help the user understand what's the previous "level". back button

  • 1
    Also you might want to consider putting the cards stack to the left as oppose to the right as shown in the diagram to help indicate progression to mimic the convention of "left" being parent and "right" being sub group. Take a look at this: medium.com/design-ux/bc190d62eff5
    – nightning
    Commented May 21, 2014 at 19:46
  • I think this a good solution to the problem which also doesn't look too shabby when done right! I will probably implement this UI-pattern when I have the opportunity.
    – Alex B
    Commented May 22, 2014 at 16:41

How I see it now it looks more like a process (step 1 > step 2). I don't understand what the text means, but if I'm right is something like main category > category?

I will just add title/header to each section and a back button in the second level to the previous one in a clear way:

<- Flytt & Transpot (for example)

In this way the user will know always where is he (title/header will do that job) and in case of a deeper level he can go up to the previous one easily.


I have used your images itself for explaining my approach. Since your prime requirement is to keep it more subtle and yet give the progress information, I would suggest the following

My approach

I couldn't figure out the text of the screen but based on your description I took the liberty of naming the screens as category and sub-category. As you see in the screen there is a header for the screen (font for which you can change to suit the layout of the application) which will indicate where the user is currently.

Below there is a small progress bar that will denote the current depth traversed in the hierarchy (Tried to match your color scheme but you may choose to make it a bit brighter if you want) as the user proceeds or goes back the progress bar will reflect accordingly. For going back as you suggested you can use the back button as it would be very intuitive.

Your Answer

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

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