The select menu navigation pattern

  • Words: Andy Clarke
  • Tagged with: responsive

Brad Frost wrote about Responsive Navigation Patterns, Alexis Fellenius Makrigianni followed up with his thoughts. Both mention a responsive design pattern that was the subject of much debate at this month’s series of Fashionably Flexible Responsive Design Workshops in Australia — transforming a navigation lists into a select menu using scripts like TinyNav.js at small screen sizes.

In the workshops, we looked at several sites that use this select menu navigation pattern:

and Sony, who transform tabbed content modules into a select menu.

Brad lists a few more examples including Five Simple Steps. (How in the world did I miss that one?)

Select menus do free up plenty of space, we can chalk that one up to a ‘pro’, but to my mind there are just too many ‘cons’ to make using select menus for navigation an option.

Select menus simply sweep navigation issues under the rug. They don’t help solve questions such as how to handle long lists or nested sub-navigation. I suspect they’re confusing to users too. In my mind there’s only one form element that should ever be used for navigation and that’s search.

Alexis reached a similar conclusion:

My main argument against it is that it feels awkward. I don’t think form elements should be used for navigation.

Then there’s the issue of design. While iOS’ select menus keep the user somewhat connected to the page behind, Android’s overlay device makes navigation a separate layer. Window Phone 7 takes navigation out of the site and into native Metro UI, completely disconnecting the page from its navigation. When you use select menus, you put navigation design in the hands of the operating system designers.

Put all this together and using select menus for small screen navigation isn’t just a bad option, it’s a lazy one. Let’s design something better.

Contact us


Let’s design something fabulous together

Call 01745 851848, tweet or email us.

Answer these questions if you’d prefer to send us a little information about your project before you call.

Our projects start at £5,000 plus VAT with an average project costing between £10,000 and £20,000 plus VAT.

We’ll keep your information private and we won’t share it with anyone else.

Studio address

OpTIC, Ffordd William Morgan,
St. Asaph Business Park,
St. Asaph, Denbighshire, North Wales, LL17 0JD

(Here’s a map showing how to find our studio.)

Registered office

Eversleigh, Lon Capel, Gwaenysgor, Flintshire, North Wales, LL18 6EJ