Responsive navigation toggle resources

Over the past couple of weeks I've designed one or two responsive navigation systems that involve toggling the display of the menu through a show/hide icon.

There are some fantastic resources out there that explain various ways of implementing this navigation pattern, which seems to be emerging as a standard, so I thought I'd take a few moments to round up those I've found most helpful.

Until now I've tended to favour the simplest possible approach to responsive navigation. When designing the mobile state for a typical navigation menu, like this -

Navigation desktop view

- I've simply floated the menu items left:

Menu items wrap when screen width is reduced

It's nice and simple, involving pure CSS and no JavaScript, and I've found it works reliably on mobile displays. This is pretty much the 'do nothing' method discussed in Brad Frost's seminal Responsive navigation patterns post.

But lately I've seen more and more responsive designs using what Brad's piece termed the toggle approach. In this system the standard desktop menu -

Navigation desktop view

- is replaced with a show/hide navigation icon when the design is viewed in mobile state, which toggles the display of the menu items:

Navigation can be toggled on smaller screens

I'm coming to really like this approach. It opens up vertical space on smaller screens, and ensures the full navigation menu can be easily accessed through a conveniently placed button. It's also rather elegant: see Starbucks and Paul Robert Lloyd for a couple of good examples.

I found the following posts very useful in helping me implement appropriate solutions for the sites I've been working on.

Apart from Aaron's all of the methods discussed above involve a bit of JavaScript but in each case the author makes it clear how to cater for edge cases in which JavaScript isn't available.

It's worth noting that there's been a little bit of debate about the most appropriate icon to use for the show/hide navigation icon. See these posts by Jeremy Keith and Andy Clarke. Both posts discuss and support the emerging consensus that a three-line icon should be the standard option, with a downwards pointing arrow probably OK too.

Categories: