I had a look around, but is there such a thing as a horizontal drop down (or drop across as it were)?

I'm involved in a website project where the PO wants to introduce this; however, I'm not sure that the usability of this is great (since it's unfamiliar).

Furthermore, before a value is selected in the horizontal drop down, the full list would be shown, potentially taking up valuable real estate.

enter image description here

  • 1
    There is such a thing. But it's usually called overconstrained, modal input. If you have a few minutes, watch this.. – HostileFork Apr 10 '15 at 7:24
  • A more typical usecase would be like this stackoverflow.com/questions/18616040/… – Boon Apr 10 '15 at 8:27
  • Keep in mind that this layout is very unfriendly for scanning. A vertical list can be scanned much faster than a horizontal one. – Vitaly Mijiritsky Apr 16 '15 at 19:03

This pattern has been used in gaming such as selecting the hardness of the game or for simple controls. ( easy - medium- hard)

If there is Left - Center - Right arrangement, i think that it will increase some factors, especially reduced error and speed.

If your project needs to be used in smaller screens, having horizontal arrangement will not be the best option.


Its might looks new, but it's depend on the number of content you have on the list. if it's like 'choosing a name of a country'; think about the width of your screen (pretty wired right ..!). but for a small number (<6) , its might be better . but remember, if you going to use it then be consistent throughout the application, because your user might expect with all drop downs . so, again consider about the numbers of the content you work with. cool thinking ...


Really depends under which context you are using it in. If you're using content like icons, thumbnails, numbers or short words in the drop-down(drop-right) it might actually look better than on using a drop-down.

Optionally you could also go for a drop-down grid to get a more balanced result.



download bmml source – Wireframes created with Balsamiq Mockups

If you want usability stick to the classic combobox.
The phone and tablet browsers understand what is a combo and they will display it full screen when opened. It will be easier for your users on small screen to select options.
If you absolutely need horizontal selection, go to to a list of horizontal radio buttons, or tabs depending of the context.


If you want to use dropdown in that way, you must teach your users that "this" thing work different on your site. Actually most people know only how standard ComboBox works, so in this case you may need usability tests.

What I mean? I don't know the context of use, but the rest of elements on your site must work similarly, creating something like "Design language" in graphic design. So users will not have to guess "what I supposed to do with this element?".

Also you must take care about behavior of this element when site become responsive.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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