There is a geographical hierarchy: Country -> Region -> Subregion.

We need to represent this in a dialogue like this:

  • Country 1
    • Preview of top 5 popular regions or subregions of country 1...
  • Country 2
    • Preview top 5 popular regions or subregions of country 2...
  • ...

The aim is to show most popular items without forcing users to travel through the whole tree. For many users it is too hard to find the particular subregion because they don't know its parent. Some Subregions are much more popular than their parent Regions.


  • Italy
    • preview of popular subitems: Chianti (subregion), Tuscany (region), Barolo (subregion), Sicily (region), Veneto (region)
  • France
    • preview of popular subitems: Bordeaux (region), Chablis (subregion), Burgundy (region)...

This representation will cover the needs of 80% users. Each shown item will be clickable - after click either on Country, Region or Subregion the appropriate filter will be applied. The dialog will be closed and the user will see the product list.

Another scenario (for 20% of rest users) - users need to go inside the country level to see the all its regions (and popular subregions).

The problem is how to combine this to scenarios so that it will be clear how to go select the exact tree item OR to go to the deeper level.

Is there a patterns for that representation or scenarios? Any ideas will be appreciated.

7 Answers 7


How about a treeview with the first node as Top 5 and then other nodes with Regions and SubRegions Details.



Maybe you can use this: https://tympanus.net/Blueprints/MultiLevelMenu/

You can move through regions and subregions and dive whenever you want. You can also show the top list and add a "show more" if it makes sense for your project.

  • Could you copy and paste the relevant information?
    – Mayo
    May 18, 2018 at 12:50

Use the titles: Country, Region and Province (or whatever is appropriate) so users can click on these titles to see the pertinent list of Countries, Regions or Provinces. It will take space, but it's the only sensible way to offer the ability to navigate through your tree AND select within the tree, instantly.


Is it possible to display a map where the user can click on to choose region/subregion? You can algo put a search text box, where the user writes the subregion name and the system shows few options that matches the criteria, just like google maps does.


You can have the popular items show in a preview list that is concluded with a more... link. Clicking the more link should open the full list sorted by hierarchy. The items in the preview list should be clickable


haha, stack exchange does exactly this. In fact it used to have popular questions in the menu as well before it moved.

It works well now too enter image description here:

Note the popular/your communities upfront, and below option to search for others. Simple and elegant.


Why not using a real TreeView component for rendering the hierarchical data and allowing selection, keyboard navigation, expand/collapse and other fancy functionalities?

enter image description here

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.