I have a dropdown in my application that allows users to select a location in a hierarchy.

Currently, I am showing each level in the hierarchy as a tree-type layout, with the lower items intended and with slightly different font styling.

JSFiddle example here: http://jsfiddle.net/uf8235f8/2/

Can anyone provide some ideas about how to make the distinction between the levels more obvious in the dropdown?

  • Providing more information about the problem at hand, would help us a lot helping you out. I would ask questions like: How many options are there to choose from? What is the user actually answering (location of his house, his work er himself) Are the options (more or less) equally distributed? The answer to these questions can guide you finding a solution to your problem. To me, it seems you've already picked a solution and you're trying to morph it to fit your problem. Taking a step back can help a lot I think.
    – Ruudt
    Commented Oct 15, 2014 at 9:57

5 Answers 5


Semantically you should be using <optgroup> tag. That is exactly what it is for: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

By default it renders almost identically to what you created with custom classes. And what is more, the optgroup label is not selectable. Thats a welcome behavior.

Now how to style it of course depends on the overall site style, but I'd suggest trying something in the direction of:

  • set a top margin for the optgroup label so it is distanced from previous group
  • set a bottom border so there's a line bellow it and emphasize that it is the title
  • This doesn't work for me because I need the group header to be selectable.
    – Steve
    Commented Nov 17, 2014 at 0:50
  • @Steve You could add an extra item to represent the whole group: jsfiddle.net/y0v1u3bb Commented Jan 14, 2015 at 17:55
  • -1 for linking to w3schools
    – ecc
    Commented Jul 25, 2016 at 15:35

I think a clear distinction between levels can come with such a structure. You can provide states, then locations and Alphabetize it.

enter image description here

Also, you can use guides from @Izhaki What's good UX for selecting an item from a list of potentially 20k+ items?


I think this is a reasonable design if the number of items is not huge. The structure is clear, and it allows quick selection of an item. I have tweaked it a little bit to separate the top two levels more.

If there is a large number of items, you should use a collapsing tree structure, so the user can narrow down the item they want without having to see everything.


Using indentation and fonts to separate hierarchy levels has its problems: Why should an italic text signify top level, and boldface signal subordination? If the intermediate levels are not selectable, you may also use space to separate levels:

The first level is shown as


Clicking "Car", the next level is displayed:


Clicking "Car" again returns you to the top level list, clicking "Ford" takes you to the list of Fords.

The lists can either be shown side by side (if space permits) or sequentially (i.e., the list of cars replaces the list of transportation modes).

Apart from the question of whether intermediate levels must be selectable (i.e., whether "Ford" is a valid selection), another difference is that browsing the entire list is easier if you only have to scroll. Depending on the knowledge of the user of the categories, the scrolling might be more appropriate.


In the JS Fiddle example you could try eliminating one level by replacing the top level with recurring icons on the right. For locations you could maybe use the abbreviation of a country or state (I don't know what your top level is). Since users can't select the top level (at least, I assume thet can't), you could make it more grey.

However, it seems to me that you're gone a bit too fast with picking a solution. Asking a few questions could help determine if a dropdown is the best solution. I've placed a few examples in the comments.

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.