Responsive navigation examples

You always want to user test your navigation – it’s one of the most important aspects of your website. Designing a responsive navigation menu is no different. In fact, you want to test a responsive menu even further since there are many different types and users may be unfamiliar with the one you choose for your responsive website.

Which responsive menu do I want?

There are quite a few different ways to provide a responsive menu to your users. Let’s go through the options.
NOTE: These are the common responsive menu options as of this writing in January 2013. More might come out in the future.
Also, thanks for Brett Pollak for many of these examples. Check out some of his slides at http://www.slideshare.net/bpollak.

Toggle

The toggle nav is a common menu right now. The user touches a button, and the menu appears (usually with some jQuery or javascript for a smooth transition).

Examples:

http://twitter.github.com/bootstrap/

http://www.uchicago.edu/

http://www.asburyagile.com/

Select-menu

The select-menu nav plays off of the select form field. You can easily categorize subnav links, but select menus are difficult to style in some browsers, so they can look at little outdated in my opinion.

Examples:

http://www.smashingmagazine.com/

http://wpmegamenu.com/responsive-select-menu/

Anchor

Sometimes your navigation might be too hefty for a toggle menu, so putting your navigation at the bottom of your page might be a good idea. Your menu is out of the way and doesn’t take up real-estate at the top.  Just add a Menu button at the top that simply links to an anchor tag at the bottom of the page where your menu is.

Examples:

http://chancellor.ucsd.edu/#mobile-nav

http://www.iso.org/iso/home.html

http://designintellection.com/

Slide out

This is sort of my favorite right now, probably because it adds extra sexiness to the already sexy responsive design. The slide out menu does exactly what is says – the menu slides out from the side of the screen. Like the select-menu nav, the slide out provides room for a more hefty navigation menu.

Examples:

http://mashable.com/

http://www.scpr.org/

https://www.amherst.edu/

Stacking

Maybe you only need a smaller set of navigation links? Try the stacking menu. It’s probably the easiest to implement since you simply float your list items and set them to a certain percentage width. Easy peasy, lemon squeezy.

Examples:

http://www.4medesignstudio.com/

http://www.ucsd.edu/

http://www.lancs.ac.uk/

Sub-nav drop

This is more involved, but it basically allows sub-navigation on a toggle type menu. Just make sure of one thing: If a top-level nav button links to a page, make sure users can touch that button to expose it’s sub-level nav without immediately linking to it’s page.

Examples:

http://cwo.ucsd.edu/about/index.html

http://ejhansel.com/responsive-menu-enhanced/

Combo

You guessed it, combos combine different types of responsive menus. In my opinion, combos can be a bit confusing if not done right.

Examples:

http://thenextweb.com/  – slide out and toggle

http://www.ucla.edu/ – two toggles from a single menu link: top is for type of user, bottom is a more traditional nav

Emerging standards

These menus are all relatively new, since responsive design is only a few years old. So, standards are just now coming into play.

One standard that is emerging is the three line symbol denoting a responsive menu.

menu-icon

I’ve seen another icon that has a grid look to it, but that has meant different things depending on the website. The main thing to keep in mind is remember your users! If they can’t understand it, don’t use it.

So go frolic around the responsive menu world and have fun. Just remember to test!

Leave a Reply

Your email address will not be published. Required fields are marked *