Adventures in Responsive Navigation

Insights into Building Responsive Navigation

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.

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 that some touch enabled devices do not recognize the hover property. Duh...

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>