How do I use dropdown navigation menus in responsive design?
There is no single right answer, but I want to share some tips and look at a few examples to help you think about the possible solutions, like:
- Multi-tiered Dropdowns
- Sliding Panels
- Hidden Menu Links
There’s no denying that modern websites need to be responsive. It’s just a sign of the times and a testament to how quickly things change on the Internet.
In the past, we’ve covered responsive navigation trends but haven’t gone into much detail regarding dropdown navigation.
This is also called tiered navigation, in which one link has a dropdown to sub-links. These make sense on desktops where a mouse can hover and move between menus, but how should you handle multi-tiered dropdown menus on mobile devices?
The first solution is to keep your tiered dropdowns, but just restructure them for a responsive menu.
Since most smaller screens are vertical, you’ll often have a three-bar hamburger menu in place of a simple nav block. But the slide-out menu can use dropdown links that also slide down. For example, the Comedy Central website uses down arrows to indicate dropdown links.
But since mobile screens don’t have as much room, these dropdown menus just lengthen the height of the menu.
The sub-links are pushed in from the left, and they also have slightly smaller text. This makes it easy to recognize which links are tiered when browsing quickly.
But the small down arrows are universal visual indicators that make it easy to browse at a glance.
Another example can be found on the TutsPlus site using plus and minus icons.
The plus/minus icon is another universal that most people recognize. It still represents the same activity, but it’s a separate link from the main nav text.
Great navigation is also creative navigation, so there’s nothing wrong with pushing limits beyond the norms.
Computerworld actually hides their dropdowns on smaller screens forcing users to browse top-level categories.
This may not be the norm or even the most accessible solution. But are those smaller menu links really necessary?
If your site works like a blog, then you might be able to get away with hiding the dropdown links.
Try different ideas and see what works best. Each site is different, so you have to gauge each project by itself.
All responsive menus typically have the “sliding” animation. But when I say sliding panels, I’m talking about tiered nav menus sliding into frame.
This is a technique that I don’t personally like, but it can be effective with really large menus.
Take a look at the PC Mag menu on your phone or in a resized browser window. A menu slides down from the top, and it looks like these are page links. But if you click any, you’ll get a sliding menu from the side with internal links.
This creates a tiered system where you only have access to certain links at any given time. The screen is completely taken over by one menu, and the internal menus all have a small “back” button near the top.
What I don’t like is how many taps it takes to go back and forth between menus.
But I do like how simple this is. It just works and nobody should have any trouble working through this menu.
The OARS website is another good example of menu links with arrow icons; the arrows show which links have sub menus. The back button appears in the top-left corner, and you can close the menu from any screen with the X icon in the top-right corner.
It may seem like nothing, but those little extras make a big difference in usability.
Think about little tweaks and problem points for users. They may seem impossible to solve, but web designers are great at coming up with UI hacks.
Take a look at the PlayStation site, which uses a sliding menu layered on top of the main menu.
Whenever you click a link, the sub-links appear from the right and cover most of the menu. But you still have access to the icons so you can flip between main menu links with one tap.
Plus the blue slide-over menu is draggable, so mobile users can make extra screen space to read the labels if needed.
This would take a lot of extra work, but the usability benefits are fantastic.
Hidden Menu Links
The last and simplest option is hiding all sub-menu links. I briefly touched on this earlier with Computerworld, because they have a nice example with a site that always shows a sliding menu.
But for other blogs, like Mashable, you might have dropdown menus on a full monitor that get hidden on mobile.
There’s nothing wrong with this strategy so long as the internal links don’t matter much. I wouldn’t guarantee this strategy for every blog; however, it does make sense if you’re trying to squeeze a bunch of links into the header.
Things get trickier when you move away from blogs and get into corporate/business websites.
The hosting company Digital Ocean uses a bunch of dropdowns for each menu link. But in their mobile responsive layout, they just have a sliding nav that drops the internal links.
Hiding these other resources limits access to the site. But it also makes browsing easier and more straightforward.
You’ll always find tradeoffs when designing for smaller pages, so you have to roll with the punches. If your dropdown links really aren’t necessary, then you can get away with hiding the internal links.
Which Style Is Best?
Ultimately, there are no “best” styles as a whole. You need to gauge each web project and decide which responsive navigation fits best.
Take a look at this study by the NN Group and try to follow their recommended 15 guidelines. They’re not applicable to every navigation, but they are generalizations that lead to a successful UI.
Choosing a multi-leveled nav design may also come down to personal preference. If you personally like one nav style over another, then you’ll always go that route.
Do whatever works best for each project and be willing to check out alternate dropdowns, because you never know what kind of techniques you’ll find out in the real world.