We're in the process of redesigning our website, and one of the design goals is to make the site more mobile/tablet friendly.

Our current site is very large, and the navigation is somewhat complicated. Right now our main navigation is divided into 8 drop-down menus that expand when the mouse hovers over them. Each menu has 5-10 items in it.

When we redesign the site, we will likely have a similar number of navigation items, although they may be organized differently. However I don't think it would be desirable to retain the existing navigation format. "Hovering" can be problematic on touch-screen devices, and the long horizontal nav bar from which the menus drop down would have to be very small to fit horizontally on a smart-phone screen. On the other hand, a simple list of links or buttons is also undesirable because there would be way too many without a way to hide or expand/collapse them.

It is also our intention to use responsive design (using CSS media queries) to adapt our site to both desktop and mobile browsers, so a solution that could use shared code for both environments is ideal. I'm trying to avoid having separate "desktop" and "mobile" sites.

I have a few ideas about how we can handle this, but I'm not sure I like any of my ideas. So my question is what is a good touch-screen-friendly and mobile-friendly alternative to pull-down menus for sites with complicated navigation? Examples of sites that implement such navigation methods well would also be very much appreciated.

  • 1
    Related question: [Best way to present navigation for mobile?] (ux.stackexchange.com/questions/19354/…). One of its answers has a link to examples of navigation patterns, as you request.
    – Pep López
    May 15, 2012 at 17:48
  • @joshuacarmody Consider editing title: "What is a good responsive design pattern for site navigation?" Or, something like that.
    – Taj Moore
    May 15, 2012 at 18:00
  • 1) Look at how the big players do facebook, twitter, google, amazon, etc. 2) Read articles by front-end gurus & reference websites: Luke Wroblewski, sitepoint, csstricks, html5rocks, etc. 3) see what sells, i.e. on codecanyon.net
    – Adriano
    Dec 17, 2014 at 15:36
  • The suggestion that @taj-moore proposed is ok for some blogging/news website, but for the application-like site it is really confusing. I have been looking for alternative approach for dropdown, but actually haven't found it. You can make user friendly dropdown menus for mobile too, just as bootstrap sites collapse everything in small dropdown tab. Like pep-lopez pointed out: ux.stackexchange.com/questions/19354/… Aug 21, 2015 at 11:02

1 Answer 1


Gracefully degrade your subnavigation or drop it by reiterating its contents on the index pages.
It's true. Just look at the evidence below. Two great examples of responsive web design are Smashing Magazine and The Boston Globe. Ethan Marcotte himself was involved in the Boston Globe redesign.

Smashing Magazine: Drop the Subnav
Note in these screenshots as we progress from desktop to mobile form factors, the "subnav" disappears completely. It is always reiterated inline on the page, so is technically redundant. Consider moving your subnavigations to your index pages.

Desktop Form Factor

Smashing Magazine desktop

Tablet(ish) Form Factor

Smashing Magazine medium

Mobile Form Factor

Smashing Magazine mobile

The Boston Globe: Degrade Subnavigation

Note that in this example, the Boston Globe navigation goes from a robust, awesome-on-desktop mega-subnavigation, to a more subdued subnav on the tablet form factor. Also note that it goes from rollover (only possible with a mouse pointer), to expand-on-click (necessary for touch devices). The navigation further collapses on mobile.

Also note that the items in the subnavigation are also present inline on the index page. In this case, News breaks down into Nation, Politics, etc. You can find those in the mega-subnav as well as on the page.

Desktop Form Factor

Boston Globe desktop

Tablet(ish) Form Factor

Boston Globe medium

Tablet(ish) Form Factor (navigation expanded)

Boston Globe medium expanded navigation

Mobile Form Factor

Boston Globe mobile


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.