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 responsive 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.
This involves just adding a little padding to your links to optimize them for touch enabled devices.
View ExampleA link in your header will take the user to your navigation list in the footer of your site.
View ExampleThis technique takes your menu list and turns them into a <select> element through the power of JavaScript.
View ExampleThis simple technique turns your menu into a simple one column overlay drop-down.
View ExampleThis technique turns your menu into an accordion style list. Great for large menus and very versatile.
View ExampleHide your navigation "off canvas" and reveal it when your menu toggle button is clicked. Popularized by Facebook.
View ExampleThis is a really nice way to present your menu at the top or bottom of your page. Just a clean grid based method.
View ExampleThis is a "neat" way to hide your nav, but maybe only good for vanity's sake right now.
View ExampleThis is a very cool way to use off canvas all the time + it's touch enabled!
View ExampleOne page scrolling websites are quite popular these days. They give you just the amount of content without having to build out an entire website. Using a fixed navigation pattern, users can easily navigate the website. Now this might become a little tricky on smaller screens since your screen real estate becomes smaller. Well, Viljami wrote a nice little JS plugin for the world to use: find it on Github. There is a also a nice little article about it here: on Adtile's website.
This article showcases some really interesting ways to bring your menu to life. If you're looking to add that extra bit of delight to your user's experience, then maybe add one of these transitions to your website's menu. The examples come courtesy of CoDrops and can be found here.
Google always seems to be on top of their game. They make no exception when it comes to the websites they build for their products or companies. Check out the navigation patterns on both of the websites below - very unique and interesting.
A little alternative to the footer menu has often been a button that appears in the bottom of the user's screen that scrolls them back to the top. I recently ran across an article that suggests a new way to do this. Instead of scrolling the user back to the top, a new menu is presented when that button is clicked. Take a look at the example. While I am not a huge fan of position: fixed when it comes to navigation, this could possibly serve a purpose for some projects.