Steal These Responsive Navigation Menu Ideas

By James Knutila on Wednesday, October 16, 2013

Steal These Responsive Navigation Menu Ideas
Navigation is a lot harder than it used to be. In the days of desktop, you just listed your categories across the top of the page, and called it a day. Simple navigation is a challenge on mobile screens, especially phones. 

The goal is to make your content easy to see, find, and use. Don't restrict access to content only because your user is "mobile." These popular examples of responsive navigation prove your content can be accessible no matter how simple or complex your site may be. 

Simple Top Navigation

Simple top navigation is the easiest to implement. So easy, in fact, it's referred to as the "do-nothing" approach. Some sites will find their existing navigation works just fine, or can be adjusted by resizing and re-positioning existing nav links. Simple top navigation doesn't require javascript and any CSS is simple. 

This works perfectly for simpler, smaller sites. Sites with more content should be wary of too many links in the header, which can block/push down valuable screen space.

Trentwalton.com and webplatform.org are examples:

  

More simple top navigation:

Toggle

Toggle navigation can be done a couple of different ways; both include a menu icon that reveals a dropdown menu. The first is an overlay menu, which drops down over your content. This is an intuitive option that leaves plenty of room for your page content. Can be tricky with too many links, as more of the screen and content is covered.

Spin Media's site is an example of overlay:

   

There are plenty of examples of overlay navigation, here are a few:


Another popular toggle style is block dropdown, using block-level elements. Tapping a menu button will reveal a hidden menu that pushes down your page content. This is a very popular technique right now, especially for larger sites. 

Bootstrap is a good example:

 

More examples of block dropdown navigation:


Both styles of toggle clear a lot of space for page content, and can handle more links. Both usually depend on CSS animation and javascript, but can be created without. 

Hidden Shelf

When a user taps on a menu button, a hidden menu is revealed in what's called a "shelf," "drawer," or "flyout".  This is a newer style, but is now widely used in native apps like Facebook, Spotify, and Gmail, so many users well-accustomed to it. It's a great option for sites with a lot of items to list out. The shelf doesn't scale up that well, so keep in mind that your style for larger screens will likely be very different. 

   

Examples of hidden shelf navigation:

Priority Plus

Priority plus navigation is a spin on other techniques. This shows users some important links and provides a "more" option for secondary content. It's a good approach for accessibility, but make sure to check your analytics before deciding which content is deemed primary. 

Notre Dame's site is an example of providing secondary navigation upon click:

   

Footer

Footer navigation is appealing for the same reasons as top navigation: it's easy to do, and makes sense for simpler sites. Some websites get away with just having links in the footer, with no menu at the top. Others have implemented a direct jump from a menu button to the footer. This is certainly direct and cuts down on endless scrolling. The jump to the footer can be a little disorienting, however, and disruptive to the experience.

Contents Magazine is a good example of the jump-to-footer style:

    

A few more footer examples:

Select Menu

Select menus are a simple and common form element. They are accessible is every browser, easy to implement, and familiar to everyone. Their simplicity is the main drawback, however. Select menus are generic looking, and might not fit in with the feel of your site. 

Red Bull Music Academy is a good example:

   

These are the basic techniques, by no means a complete list. Many of the examples listed above combine styles and find interesting ways to add secondary navigation links. What techniques or examples are we missing? 


Related: 


DevKit Templates

Find the website template you want in the Moboom Market