An example of this functionality can be found in this site (shrink the browser viewport to see the selectbox navigation take over.)

Is this a good practice? Wondering if anyone has any experience to back this up one way or the other.

  • I think it depends on what you mean by "complex". The example site that you linked isn't really complex, it's one drop-down to navigate to the desired location. Do you have any more information that you can give? – ScottK Jan 9 '12 at 19:37
  • @gregord: If we've answered your question, you can select the best solution so that if anyone comes across the same problem in the future, they know the course of action. – dnbrv Feb 7 '12 at 18:34
  • android 2.x has serious bugs regarding select box use (in conjunction with absolute position and/or fixed positioned elements and/or random css3 styles) – Jamie Pate Sep 21 '12 at 17:06

Yes. Drop-down is a perfectly fine way to keep navigation on top of the page while saving space with responsive mobile design. However, the standard rules of mobile design still apply. The drop-down must have a clear call-to-action associated with it indicating that it's navigation not a selector for a form and it must contain links to sections that are important to mobile user.

In your example, there's a good call to action Navigate... but the selection includes Source, which points to GitHub where no mobile version is available.

Since the time of the original answer, Smashing Magazine has rolled out a new responsive design layout. In that new layout, the primary navigation bar also becomes a drop-down with the first option called Smashing Categories when screen width drops below 590px.

Update 2
CSS Tricks published the complete recipe for this approach in summer of 2011.

| improve this answer | |
  • That example's just a drop-down list, not a combobox. Is that what you meant? – Taj Moore Jan 9 '12 at 19:14
  • Yeah. My bad. Edited. Thanks for the catch - I always mix them up. – dnbrv Jan 9 '12 at 19:26
  • There is a HUGE difference between an accordion navigation and using a select box form element. The select element should NEVER be used as a shortcut for navigation. Read baymard.com/blog/mobile-dropdown-navigation – Bruno Bronosky Feb 13 '14 at 8:42

I think that using a drop-down is not a great interface to use for navigation on mobile. My experience from user testing on mobile device is that people want to do very specific tasks on a mobile browser, not just casual browsing. Additionally, users are used to native apps and enjoy using the same interface on a mobile browser.

The main goal on mobile browser should be :

  • Keep the main navigation link's size to the average finger touch (from iOS it's 44px *44px).
  • Giving the user just what they want, taking away all extra images and decorations.
  • Keeping it as simple as possible, as people won't want for slow load times.

So if you are going to use the drop-down list make it little bigger and make it look tapable. Another idea is to know exactly what your user wants and just give those features in one home page and make them click which ever they want. For example: See (www.dropbox.com) on mobile.

| improve this answer | |
  • An accordion menu is an excellent choice for navigation. A select box is not a suitable shortcut. Users want to scan all their options before making a choice. The select box is terrible for this. – Bruno Bronosky Feb 13 '14 at 8:44

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.