Adventures in
Responsive Navigation

by: @erickarbe

Responsive Navigation?

Yes - navigation patterns in responsive web design can be tricky to tackle - especially while keeping a consistent look, feel, and experience on your site.

So this is a little list of some popular methods of dealing with navigation on a responsive website. I've included code samples as well. Feel free to check out the source code and craft your own navigation pattern.

Further Reading

I've written a blog article about this subject with some helpful tips and things to think about before building your site's navigation.

Read more →

The Examples

"Do Nothing" Approach

This involves just adding a little padding to your links to optimize them for fingers.

View the Example →

Footer Navigation

A link in your header will take the user to your navigation list in the footer of your site.

View the Example →

Select Menu

This technique takes your menu list and turns them into a <select> element through the power of JavaScript.

View the Example →

Menu Overlay

This simple technique turns your menu into a simple one column overlay drop-down.

View the Example →

Multi Toggle

This great technique turns your menu into an accordion style list. Terrific for large menus. And my personal favorite for most websites.

View the Example →

Off Canvas

Hide your navigation "off canvas" (or in the basement) and reveal it when your menu toggle button is clicked. Popularized by Facebook.

View the Example →

Grid Based

This is a really nice way to present your menu at the top or bottom of your page. Just a clean grid based method.

View the Example →

The Flip Method

This is a "neat" way to hide your nav, but maybe only good for vanity's sake right now.

View the Example →

Some Final Thoughts

Navigation in RWD can be tough! Responsive Web Design can be a fickle thing - especially if you are retro-fitting an existing website. There are lots of things to think about:

  1. What breakpoints should I use?
  2. How should I handle images?
  3. How can I optimize load time for mobile users?
  4. How will my tables look on smaller screens?
  5. Should I use server side detection or client-side detection for any special features?
  6. What should I do with all this content?
  7. And finally... what do I do with this navigation?

.Net magazine had a nice little article on the most common RWD problems. Guess which one was number 3? You guessed it - navigation.

So What Should I Do?

Typical website navigation that was built for desktop size websites - let's just say 960 pixels wide - often consists of an unordered list, along with children and quite possibly grandchildren items. It might be at the top of your page or running down either side of the page. It probably even uses jQuery or some other javascript to give it a fancy animation (or to simply make it work in crappy IE versions). While this is usually fine for a website at 960 pixels (or if you're happy letting your users pinch and zoom while browsing on their iPhone), what happens when you build a responsive site that scales to 320 pixels wide? Where does your navigation go? How can you still navigate and get around the site? How can you still provide a good experience for your users? The answer: responsive navigation patterns .

How to Better Optimize Your Menu to Make it Responsive

When creating your list of navigation links, you might need to create a sub-menu. When creating that sub-menu, please make sure to use the hash # tag as your link (href attribute) for the parent element of any sub-navigation (secondary or tertiary menus). The reason for this is written above - some touch enabled devices do not recognize the hover property. Onward...

So instead of doing this:

<ul>
  <li><a href="/home/">Home</a></li>
  <li><a href="/about/">About</a>
    <ul class="sub-menu">
      <li><a href="/overview/">Overview</a></li>
      <li><a href="/more-about/">More About</a></li>
    </ul>
  </li>
  <li><a href="/contact/">Contact</a></li>
</ul>

You'll want to do this:

<ul>
  <li><a href="/home/">Home</a></li>
  <li><a href="#">About</a>
    <ul class="sub-menu">
      <li><a href="/about/">Overview</a></li>
      <li><a href="/overview/">Overview</a></li>
      <li><a href="/more-about/">More About</a></li>
    </ul>
  </li>
  <li><a href="/contact/">Contact</a></li>
</ul>

One more helpful thing you'll want to do is add some classes to your navigation to help with styling and your JS. I like something like this:

<ul>
  <li><a href="/home/">Home</a></li>
  <li class="has-submenu" ><a class="dropdown-toggle" href="#">About</a>
    <ul class="dropdown-menu">
      <li><a href="/about/">Overview</a></li>
      <li><a href="/overview/">Overview</a></li>
      <li><a href="/more-about/">More About</a></li>
    </ul>
  </li>
  <li><a href="/contact/">Contact</a></li>
</ul>