Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

A Brief Overview On Responsive Navigation Patterns

To say that responsive web design has changed our industry would be an understatement at best. We used to ask our clients which resolutions and devices they wanted us to support, but we now know the answer is “as many as possible.” To answer a challenge like this and to handle our increasingly complex world, our industry has exploded with new thinking, patterns and approaches.

In this article, I want to look specifically at the issue of responsive navigation. We will first talk about information architecture, then the purpose of navigation, and finally we will look at three responsive navigation patterns that have served well over time.

Further Reading on SmashingMag: Link

The Information Architecture Challenge Link

The first things that are affected in a mobile-first world, or at least should be, are content and information architecture strategies. If our applications are primarily about facilitating tasks and sharing of information, then we must focus there first.

The industry went through a trend of megamenus and increasingly complex navigation structures, but responsive web design has forced us to rethink this complexity. How much does our navigation need to hold in order to be effective? Does an application really need several different types of navigation, or can it work fine with just one? You will find that most responsive navigation patterns have forced us to simplify and concentrate, and that is a benefit of a mobile-first approach5.

An image of the responsive navigation used on Intel's website.6
Intel’s navigation is complex, and that complexity is exacerbated on small viewports. Notice that the navigation has tabs, a listing of links and subcategories in a small space. (View large version7)

The truth is that if your information architecture isn’t optimized, then it doesn’t matter how slick your responsive navigation solution is. This was true long before we were debating the merits of media queries, but now the challenge is even greater. We must ensure that our navigation structures, when they are revealed on our websites, are clear and minimize any cognitive friction8.

Here are a couple of questions to ask as you create your navigation:

  • Is it painfully clear what each of your labels means, and is the value proposition (sometimes called “information scent9”) clear to your visitors?
  • How can you reduce the complexity in your navigation as much as possible? If your navigation structure is seven levels deep, not many are going to be up for that challenge.
  • How can you ensure that the navigation doesn’t get lost throughout your resolution adaptations?
  • Have you tested it thoroughly to ensure that the navigation aligns with the user’s goals in visiting the website?

The Purpose Of Navigation Link

Let’s take a quick moment to reflect on the purpose of navigation. This might seem elementary, but I’ve seen too many applications whose designers have forgotten these important principles. The best article I’ve read on this comes from one written over a decade ago by Derek Powazek10 (which shows that the heart of the matter remains the same). He writes:

Navigation also has three parts, which are used to communicate to the user about their past, present, and future. Any good global navigation scheme should, at a glance, answer the top three questions every user has at the back of their mind on any page:

  • Where am I? (Present)
  • Where can I go? (Future)
  • Where have I been? (Past)

We must revisit these principles because I see that most responsive navigation solutions handle these very inconsistently. Most solutions handle the question “Where can I go?” pretty well, but most websites don’t even bother to show in their responsive solutions where the user is currently or where they’ve been. As you adapt some of the patterns we’ll look at, be sure to mold them to satisfy these important criteria.

An image of the responsive navigation used on NCSBN website.11
NCSBN’s website is one of the few that marks in its responsive navigation where you are in the website’s structure. (View large version12)

Stephanie Lin has just posted an article entitled “The Rules for Modern Navigation13,” which makes a good complement to this article. She covers important interaction design components to consider in your navigation.

Preferable Patterns Of Responsive Navigation Link

Remember that we have a lot of options today for responsive navigation, but here is my take on the best patterns. Brad Frost has done us all a service and cataloged most, if not all, of these patterns on his website This Is Responsive14. He has also written two posts about these patterns: “Navigation Patterns15” and “Complex Navigation Patterns for Responsive Design16.”

1. The “Do Very Little” Pattern Link

This pattern is well illustrated on the UX London 2017’s website17. Here is what it looks in small viewports.

An image of the responsive navigation used on UX Longdon 2017.18
UX London 2017 uses a pattern that maximizes its navigation’s visibility and utility.

Why It Works Link

I love this pattern because it fundamentally makes navigation a priority, and it doesn’t hide the navigation behind any progressive disclosure19. Most responsive navigation patterns involve progressive disclosure, and while disclosure is a good option, it should only be pursued when a better option doesn’t exist. I agree with Nielsen Norman Group on this issue20: If you can show navigation, show it. No one visiting this website has to wonder where the navigation is. A bonus is that this has no client-side dependencies, so you can keep your dependencies low and reduce failure points.

However, this is a hard sell for a lot of responsive applications. First of all, it doesn’t handle complex navigation well. If you need more than one level in your application shown at one time, then this pattern is not for you. Also, it could take up a lot of important vertical space in the application, so be sure that you can implement it like the UX London site and keep the allotted space in check.

2. The Multi-Level Toggle Link

Most applications can get away with two levels of navigation, and I have found this is the sweet spot for many of my implementations. In small viewports, this pattern enables users to toggle the subsections easily and see the contents within. One modern example of this is the White House’s website21.

An image of the responsive navigation solution used for WhiteHouse.gov.22
The White House’s website provides toggles to show subcontent.

Why It Works Link

It may not be the flashiest solution, but I have found it to be very stable. This pattern works well for the majority of navigation I need to support, and it effectively handles simple two-level navigation structures (which I’m hesitant to go beyond in most circumstances). Also, we must always build these solutions progressively23, so that they work even when the code supporting them fails.

I used to use FlexNav24 to achieve this effect, but the project has been abandoned by its owner. A promising alternative is SmartMenus25, but I have not used it yet. If you are interested in a pure CSS version of this, check out CSS Script’s code example26.

3. The Simple Toggle Link

This is another good option and is really a variant of the previous pattern. In this case, we have no need for multiple levels, but the navigation items are still too numerous to allow for the “do very little” pattern. An example of this is found on Starbucks27’ website.

An image of the responsive navigation solution used for Starbucks.28
Starbucks provides a simple toggle. (View large version29)

Why It Works Link

With some clear iconography and colors, this option can really work well because it is very simple to implement and use. Variations of this pattern push content down or overlap it, and I feel both are acceptable. If you want a good script for this, check out Responsive Nav30.

Remember that you do not necessarily have to support multiple levels in your responsive solution. For example, the World Wildlife Fund31’s navigation at higher viewport resolutions has a dropdown, but at the lowest viewport it simply toggles and the top-level links go to landing pages, where the remaining navigation items are shown. You could also provide alternate ways to navigate, including breadcrumbs, which can be a helpful addition at any viewport size.

An image of the responsive navigation solution used for World Wildlife Fund.32
World Wildlife Fund presents top-level links and shows subitems on the landing pages. (View large version33)

Honorable Mentions Link

As mentioned, there are many approaches you could choose from today to handle your project’s needs. Even though I like the three above the best, here are two other possibilities.

Off-Canvas Link

This is probably the most popular, but some implementations are better than others. It can be done well, and if you want a script, I have used MMenu34 with great results.

Zurb's Foundation has popularized the off-canvas pattern.35
Responsive frameworks like Zurb’s Foundation have popularized the off-canvas pattern. (View large version36)

Priority Plus Link

This has picked up steam in the last year or so, and it can also be good in some situations. I have used it on websites that have really long horizontal navigation, to avoid having to hide the menu items too early as the viewport shrinks. The only big problem with this solution is that it forces you to make assumptions about what is most important, so be careful. I have used the PriorityNav.js37 script for this, and it has worked well.

Wonderful Machine uses the Priority Plus pattern to good effect.38
Wonderful Machine uses the Priority Plus pattern to good effect. (View large version39)

The Dreaded Hamburger Icon Link

There is simply no way I can talk about responsive navigation and not mention the debate around the hamburger icon (there are also other variants of responsive “mystery meat” navigation indicators40). The real issue here is: Does the icon convey enough meaning on its own, or does it need a textual indicator? The debate is essentially about the universality and recognizability of the hamburger icon. For me, very few icons have a universally clear meaning without some kind of text to support them, and the hamburger icon is just another example of why it’s best not to rely on the icon alone. Ask yourself, Is it worth confusing a visitor by not including it, or should I just include it to increase the likelihood that it will be understood? I lean towards including a textual indicator. Remember to always evaluate the context of your application to answer questions like these.

Here are some articles that talk about the issue if you want to learn more:

Conclusion Link

The great news is that there are more options than ever for handling navigation in your responsive application. As long as you stick to clear information architecture design, testing and proven patterns, you will ensure that visitors will be able to use your website easily now and into the future. The next step is to start experimenting with these and other patterns to see what works best for your particular application. Behavior and needs change over time, so continually re-evaluate how you use these approaches. Another article on Smashing Magazine, “Responsive Navigation on Complex Websites45,” provides case studies and code for you to go further.

My thanks to Ben Callahan46 and Jacqui Olkin47 for their feedback on drafts of this article.

(da, vf, yk, al, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2013/09/responsive-navigation-on-complex-websites/
  2. 2 https://www.smashingmagazine.com/2013/03/navigation-mega-sites/
  3. 3 https://www.smashingmagazine.com/2013/01/off-canvas-navigation-for-responsive-website/
  4. 4 https://www.smashingmagazine.com/2012/06/responsive-menus-enhancing-navigation-on-mobile-websites/
  5. 5 http://www.lukew.com/ff/entry.asp?933
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/03/intel-large-opt.png
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/03/intel-large-opt.png
  8. 8 https://www.interaction-design.org/literature/article/my-head-hurts-cognitive-friction-in-the-age-of-mobile
  9. 9 https://www.nngroup.com/articles/information-scent/
  10. 10 http://alistapart.com/article/whereami
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2017/03/ncsbn-large-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/03/ncsbn-large-opt.png
  13. 13 http://www.uxbooth.com/articles/the-rules-for-modern-navigation/
  14. 14 https://bradfrost.github.io/this-is-responsive/patterns.html#navigation
  15. 15 http://bradfrost.com/blog/web/responsive-nav-patterns/
  16. 16 http://bradfrost.com/blog/web/complex-navigation-patterns-for-responsive-design/
  17. 17 http://2017.uxlondon.com/
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/03/UX_London_2017-opt.png
  19. 19 http://vanseodesign.com/web-design/progressive-discolosure/
  20. 20 https://www.nngroup.com/articles/killing-global-navigation-one-trend-avoid/
  21. 21 http://whitehouse.gov
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/03/whitehouse-preview-opt.png
  23. 23 http://alistapart.com/article/understandingprogressiveenhancement
  24. 24 http://jasonweaver.name/lab/flexiblenavigation/
  25. 25 https://www.smartmenus.org
  26. 26 http://www.cssscript.com/multi-level-toggle-responsive-navigation-menu-using-pure-css/
  27. 27 http://www.starbucks.com/
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/03/starbucks-large-opt.png
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/03/starbucks-large-opt.png
  30. 30 http://responsive-nav.com/
  31. 31 http://www.worldwildlife.org/
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/03/wwf-large-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/03/wwf-large-opt.png
  34. 34 http://mmenu.frebsite.nl/
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/03/zurb-large-opt.png
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/03/zurb-large-opt.png
  37. 37 http://gijsroge.github.io/priority-nav.js/
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/03/wonderfulmachine-large-opt.png
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/03/wonderfulmachine-large-opt.png
  40. 40 https://twitter.com/lukew/status/591296890030915585
  41. 41 http://www.lukew.com/ff/entry.asp?1945
  42. 42 https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/
  43. 43 https://www.nngroup.com/articles/hamburger-menus/
  44. 44 https://conversionxl.com/testing-hamburger-icon-revenue/
  45. 45 https://www.smashingmagazine.com/2013/09/responsive-navigation-on-complex-websites/
  46. 46 https://twitter.com/bencallahan
  47. 47 https://twitter.com/OlkinComm

↑ Back to top Tweet itShare on Facebook

Chris Poteet is a user experience consultant specializing in enterprise content management, user research, and web content management. His research interests include UX research and how UX fits in with other implementation disciplines.

  1. 1

    What is the difference between an “off-canvas” menu which uses a hamburger icon to open it, as in the Zurb example (honorable mention) and the hamburger menu (which you have issues with)?

    3
    • 2

      Oh, and I just looked at the Starbucks website which you put in “3. The Simple Toggle”. It also uses a hamburger icon. I’m confused, do you dislike hamburger icons? Many of your recommended examples use them but you call them “dreaded hamburgers”. Maybe I’m confused, maybe you don’t like actual hamburgers?

      5
      • 3

        I think that section is just more of a side note on the use of the hamburger icon. In my opinion if your navigation is small enough not to use it, then don’t. I also think that the hamburger icon is so largely used that the majority of users will know what it means. Other icons within an application or website is a different story, and those should have tool tip (textual indicator).

        1
        • 4

          Jon/Keir: Yes, some of the examples does use the hamburger icon. I was just highlighting their interactions, and I comment about the menu icon later. What I would say if you asked is, “I like the pattern but dislike using the icon alone.”

          3
  2. 5

    I noticed that some of the sites you reference, like the London UX and WWF, don’t indicate in the global menu which part of the site the user currently is in. I would for instance expect “Speakers” to be highlighted when I’m there. Do you have any thoughts on this?

    0
    • 6

      Yes, you are right, and I do think it is an oversight. That is why the NCSBN’s site is sadly such an anomaly amongst sites that use an adaptive navigation solution. I would definitely suggest including an indicator where the user is at in the navigation. A navigation should tell the user where they are at.

      0
  3. 7

    There’s nothing wrong with the hamburger. It’s become fashionable to deride it but who doesn’t know what it’s there for?

    Another menu option I like is the fullscreen overlay, even on desktop. Slide it in if you like to make it obvious that it’s a menu and not a whole new page, but the real estate it gives you is incredible.

    0
    • 8

      Nuwanda: As some of the linked resources above prove, it is not as universal as you would like to think it is. For me, it’s a simple question: is it worth risking someone not understanding how my sites works over the inclusion of a textual guide? I think the answer is a resounding “no.”

      Also, you mentioned full-screen overlays. I do not care for them because they do not serve the main functions of navigation I also mentioned in this article (most notably, “where can I go?”). In addition to that, they are essentially modal dialogs which necessitate user intervention and they remove context. I do not think it is a good pattern, and I think its low adoption speaks to that.

      0
  4. 9

    Some interesting and effective alternatives to the hamburger icon, excellent!

    0
  5. 10

    Out of the 6 example sites you provided, only 2 of them don’t heavily rely on the hamburger icon. I’m curious what you would use in its place, if it’s so bad?

    0
    • 11

      Hamburger alongside the word “Menu” or “Options”. Let’s move on from this

      1
  6. 12

    Hey,
    Check my website as well, it contains 17 desktop menus, 7 mobile menus and 119 responsive menus (with combination of desktop & mobile menu), as you can select and download the code of it.

    http://www.uiplayground.in/responsive-menu-navigation

    Enjoy Downloading the same :)

    0

↑ Back to top