Adventures in Responsive Navigation

Responsive Navigation...

Navigation patterns in responsive web design can be tricky to tackle - especially while keeping a consistent look, feel, and experience on your site. Your website's navigation is how users get around on your website and discover all that you have to offer. So when your site is viewed on smaller screens - make sure it's still easy to navigate. I've put together a list of popular methods of dealing with navigation on a responsive website. I've included code samples as well. Check out the source code for how each method is achieved.

I've written a few tips on how to structure your menu to help you build a better desktop menu and mobile menu. I've also written a blog article about my thoughts on responsive navigation with a few helpful things to think about before building your site's navigation.

The Examples

Do Nothing Approach

This involves just adding a little padding to your links to optimize them for touch enabled devices.

View Example

Footer Navigation

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

View Example

Select Menu

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

View Example

Menu Overlay

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

View Example

Multi Toggle

This technique turns your menu into an accordion style list. Great for large menus and very versatile.

View Example

Off Canvas

Hide your navigation "off canvas" and reveal it when your menu toggle button is clicked. Popularized by Facebook.

View 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 Example

The Flip Method

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

View Example

Always Off Canvas

This is a very cool way to use off canvas all the time + it's touch enabled!

View Example

Further Reading + Links

Navigation is Simple Again

The web seems to have gone through a period where navigation got super complicated because everyone was trying to be different. Now it seems to have come back to a time where the design of navigation is just plain simple. A lot of designers are focusing on ease of use rather than slick transitions and hidden menus. No longer do we see menus with tertiary navigation (finally!)

It almost seems that content is being pared down to avoid overloading the user. Simpler websites with clear calls to action and direct messaging is now the way of the web. Website owners realize they are in a competition for the user's time, therefore "getting right to the point" is more appealing these days.

That being said, I believe there are still interesting navigation patterns out there that provide useful and delightful experiences.

Transitions, Overlays and Fun CSS Animation

Animation is still the way of the future. Web designers still haven't made full use of the potential that we have with animation. A few articles that may help to illustrate simple, yet interesting animations can be found here and here. I'm also still a big fan of doing things like this.