7 Responsive Navigation Patterns

Posted: 04 Jun 2012 05:30 AM PDT

Once you get comfortable developing flexible layouts and moving around the big boxes of a responsive design, your attention will turn inwards toward the smaller boxes inside the big picture containers. First among those will likely be navigational systems.

As you work with responsive sites you’ll quickly discover that the navigation bars and menus you create for a widescreen browser don’t work so well on smaller devices like smartphones. Fortunately, just as there are responsive layout patterns, there are patterns emerging for how designers are treating navigation in responsive designs.

The Problem

The problem with responsive navigation is one of space. We’d prefer visitors quickly see and begin interacting with our content without navigation getting in the way, which means limiting the space navigation uses.

On a smartphone:

Horizontal space is limited
We can fit about 4 links across
Making links smaller makes them harder to select
Vertical menus takes up a lot of space

A good first step is to reduce top level menu items to what’s necessary. Are all 10 links needed? Could your content be grouped into 4, perhaps 5 main categories? If so how do you handle sub navigation within each section?

Navigation Patterns

Where Luke Wroblewski looked at big picture layout patters, Brad Frost took a look at the different responsive navigational patterns and found 7 designers are using.

Top nav or “do nothing” approach — This is a simple pattern that can work when you have only a few links. Essentially you do nothing other than let your horizontal navigation drop below your logo or slide above it. The entire navbar is flexible and gets smaller, possibly becoming 2 rows of links.

It’s easy to code since it doesn’t require much beyond relative measurements, however you’re limited in how many links you can realistically use.

Footer only — This pattern simply moves navigation to the footer. Because we’re less concerned with using space at the bottom of the page this type of navigation can be designed however you like. The downside is it requires your audience to scroll and find your navigation, which makes it a less than ideal approach.

Footer anchor — Improves on the footer only pattern by providing an anchor (link or button) to the navigation in the header. This solves the problem of scrolling, but can be disorienting as visitors are jumped around the page. A back to the top link would likely be included in the footer navigation.

With both of the above footer patterns navigation could be relocated to the top of the page once the browser is wide enough to accommodate it.

Select menu — Keeps everything in the header. Space is conserved by transforming navigation into a select menu. This allows more links in your navigation without taking up additional vertical space and keeps the navigation at the top of the page.

However selects are not always easy to use and typically lack styling options beyond the default. This pattern also require some Javascript, though not a lot.

The toggle — This pattern takes a cue from the footer anchor and uses a button at the top to reveal the menu. Here the menu slides open in place (like an accordion or drop down) instead of jumping you to the bottom of the page.

It’s an elegant solution that displays and hides navigation on request. It does require some Javascript to work, though again not a lot. Perhaps the biggest downside is designers have yet to settle on a consistent menu icon.

Left (or right) nav flyout — Taking a cue from the off canvas layout pattern, navigation here is off to the side by default. As in the toggle pattern a single menu icon or link is present and when clicked the navigation slides in from the left or right. It might slide on top of the content or push the content off the other side.

This pattern does take a little more effort to get working and could potentially confuse people if the content completely goes away. You can prevent the latter, by leaving a portion of the content visible to make clear what’s happening.

The “hide and cry” — The final pattern attempts to solve the problem by hiding it and removing global navigation entirely. This could work for small sites where navigation could always be provided in-content, but for most sites it’s best to avoid.

This pattern often assumes people don’t need or want the same content on a phone as they do on a desktop and so reduces site content for smaller devices. Again probably best to avoid this pattern outside of limited cases.

My Experience

So far the responsive sites I’ve developed haven’t required many links in their global navigation and I’ve been able to use the “do nothing” pattern in all cases. The key to this pattern is to maintain the balance of space.

You have to use enough space between and around individual links to make them usable, while not taking up too much space with your overall navigation. With 4 links this can be done reasonably well, but once you get beyond that you have to add a second row of links and you begin making compromises with space.

I think the long term solution is going to come from either the toggle or nav flyout patterns. Essentially something where we have a single button that when clicked reveals the navigation. I even suspect that as these patterns become more common on smaller screens they’ll gain popularity on larger screens as well.

These 2 patterns fit well with the principle of disclosures, which suggests that you show only what’s necessary, while providing quick access to more. All these patterns need to become de facto is a consistent icon to display and hide the menu. Most common is the 3 or 4 dashes and dots, but not everyone uses this yet.

It wouldn’t surprise me if at some point a gesture or tap is used to reveal and hide navigation on touch enabled devices. I first noticed this in Apple’s iBooks, though I couldn’t say for certain where it first appeared.

Summary

Navigation is one of the internal blocks or boxes in a responsive design that needs special attention. We run into the issue of wanting our navigation to be always and easily accessible without getting in the way when not needed. This is easy enough to do on wide screens, but more difficult on smaller screens with limited space.

The easiest approach might be to limit how many links are in your global navigation. If you can reduce them to 4 or 5, you might simply drop your navigation below your logo and be done with it, assuming you provide enough room for each individual link to be tapped. This probably won’t work for most sites though.

My gut tells me the eventual patterns that win out will be those that provide an always on or easily accessible button that when clicked reveals the menu options. Both the toggle and flyout patterns work this way and they’re the ones I suggest you look into.

What patterns have you been using? Do you prefer one of the patterns more than the others? Have you used or seen a pattern for responsive navigation not mentioned here?