Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. 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. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

The Semantic, Responsive Navicon

Icons are scattered throughout our history as a species; early man painted pictures onto stone depicting their triumphs over their hunted prey, Egyptians had an icon-based writing system in their hieroglyphics, and in the early church the symbol of a fish represented a Christian meeting place or tomb. Icons have always served a definitive purpose throughout mankind’s history on this planet: to inform and instruct.

Icons are still prominent today in our everyday lives, as they serve the same purpose as they always have. As the craftsmen of the Web industry, we must ensure that we use correct representations of actions to inform users of their consequences.

As the Web has evolved over the years, we have established a (fairly) standard set of icons — a trash can or a cross has come to represent deleting or removing something; an envelope has become the indicator for a message or mail. These are little visual cues to help people along their way. Some icons have established such strong associations that they can exist on their own without supporting text, meaning, they can remove language barriers to form their own universal language. We need to use the right icons to communicate the right things.

Today’s Web is in a transitional phase, probably the most groundbreaking phase since the Web standards movement — I would go as far as suggesting that we are in the middle of the Responsive Web Design movement. As we build responsively, our websites will appear differently on different devices and often behave differently too. Navigation menus in particular are elements that can change dramatically in responsive websites1. The change from a large context to a small context often requires changing the navigation pattern to something rarely seen on the Web until the arrival of responsive design. As more and more responsive websites enter the public domain, the more people will see these newfangled navigation solutions, so they shouldn’t need to ask “What does that button do?”.

There have been calls recently from Andy Clarke2 and Jeremy Keith3 to have a standard icon for revealing navigation in small contexts, and rightly so — this is a new technique and we need to set users’ expectations about the consequence of the reveal action.

Three Horizontal Lines Link

The majority of responsive websites that use an icon to represent a hidden menu opt for the three horizontal stripes — these include some high-profile websites like Starbucks and also popular apps like Facebook and Path. Part of its power lies in its versatility, as the icon itself doesn’t clearly represent a precise object nor method, which means it can be applied to a variety of navigation-based design patterns without showing a preference to a particular pattern. Its vagueness in shape doesn’t detract from its message as the icon is becoming an emerging standard. Like a new term appearing in our everyday language, we know what it means. And with high-profile websites throwing their weight behind it, so will average users over time.

Let’s take a look at some examples if the horizontal lines being used in some responsive websites.

Twitter Bootstrap4
Twitter’s bootstrap framework shows three horizontal lines as a visual cue for a sliding menu, revealing the main menu links which anchor to the various sections of the page.


The Webdagene conference website also uses the same pattern for a similar reveal, but unlike Twitter’s Bootstrap the links open a new page instead of anchoring to sections. Two different approaches to navigation encompassed by the same icon.


dConstruct 20128
dConstruct uses the three horizontal lines to represent the menu revealed in an upward sliding transition. Note that even though the revealed items here are square in shape, they still use the horizontal lines to represent the menu.


Golden Grid System
Joni Korpi’s Golden Grid System uses the same icon but for a different purpose — pressing the button shows the gridlines for the currently active grid.

The three lines icon isn’t the only indicator people are using in the wild — like the alternatives, it has its drawbacks. In iOS, three horizontal lines are used to signify the ability to re-arrange full-width list items. So perhaps this part of our icon language is still finding its feet.

Alternative Patterns Link

Cognition by Happy Cog10
There are alternative patterns in the wild that aren’t as common as Happy Cog’s grid icon. This could perhaps indicate something similar to a speed dial or home screen — a springboard to other destinations. On the other hand, it could mislead less experienced users to think they are leaving the website to go somewhere else.


Sony also deviates from the three horizontal lines icon and opts for a plus icon to show their menu. While visually pleasing, the plus symbol signifies adding something and as such it might be sending out the wrong message to users, and not clearly articulate the resulting action.


Nathan Sawaya14
Nathan Sawaya’s hidden menu is represented by a cog which also could cause confusion. In digital products, the cog icon has become the universal indicator for settings, options or for customization. It feels like it’s misrepresenting the action and consequence, and may only be pressed as a last resort or out of curiosity.


MSN Olympics Coverage
Governor Technology produced the MSN’s Olympics Coverage website which boasts a series of creative pattern translations that include the main navigation — represented by a downward arrow. The downward arrow is a safe bet, specifically in slide-down menus. It hints towards the consequence in the same way a <select> menu would.

Microsoft recently launched a new responsive home for their products which was expertly designed and developed by Paravel17 using Microsoft’s new design language. The icon used to represent the menu in small contexts is a good example of “table of contents” metaphor which communicates that the click on the icon would lead to an overview of available navigation options.


All these examples produce the same end result — you push a button, a menu appears. But there is a disparity in the way the action is presented. If icons are a language, then we are sending mixed messages where responsive navigation is concerned. We are dealing with new patterns, new techniques but so are the people on the other side of our products — they are closer to our interfaces than ever before. Today we are dealing with both those devices as well as touch-based interfaces where there is nothing between the user and the interface. The message we deliver needs to be consistent and clear, the icon is part of this message, part of the greater language. As Andy Clarke has already said: “We need a standard show icon for Responsive Web Design”.

“Unless our navigation is arranged in a grid (and so we should use a grid icon), I’m putting my weight behind three lines because I think it’s most recognizable as navigation to the average person.”

— Andy Clarke, We need a standard show navigation icon for Responsive Web Design19.

I would wager that the vast majority of users faced with a hidden menu in small contexts have already used the three lines pattern to navigate rather than the alternatives. With the sheer amount of users using apps like Facebook and Path, it’s safe to say that it’s an intuitive indicator. If we are to use this effectively in resolution independent responsive designs, then it needs to be represented in a scalable way, ensuring it stays legible regardless of the device where it is being displayed on. There are a number of ways we can do this.

Pictographic Web Fonts Link

“Don’t get hung up on ‘Retina’, worry about hi-res.”

— Adam Bradley, Responding to the New High-Resolution Web20.

With different pixel densities cropping up, resolution independence is crucial to achieving a consistent experience regardless of the user’s context. It’s impossible to design for device dimensions and specific screen properties and stay future friendly at the same time. Scalable assets are key to staying ahead of the game, and one way to create them is to use pictographic Web fonts.

In theory, you could create a font containing only one glyph to represent the menu indicator. It would be a light resource to load, but you would still be imposing an additional HTTP request on the user, which isn’t ideal (it would essentially be a hack). Additionally, if the user is on a very slow connection, then the icon may take time to load. During that time they may miss the menu option — we are talking about mere seconds and potentially fractions of seconds here — but this level of care and attention to detail is what defines you as a craftsman of the Web. After all, each decision you make directly affects the user on the other side of the screen.

You could get around this by embedding the Web font using a data:URI which would save the additional HTTP request. This is fine in isolation, but if you are loading multiple data (URIs in different places), you run into issues regarding maintainability. Multiple font variations can also produce a page weight overhead that would render this approach pointless. So it all depends on the case for your individual use.

In general, we should avoid loading a Web font solely for one glyph for use in displaying our responsive navigation icon. The page weight today is as important as it was when we were designing and building for dial-up connections, and latency is the new Web performance bottleneck21, so keeping the webpage size small is still very important. The contrast in connection capabilities is larger than it has ever been and any unnecessary burdens on the user’s connection can have a negative impact on the user’s experience.

However, it’s likely that you may be loading pictographic icons for other purposes in your project. If that is the case, then I see no harm in loading the set containing the three horizontal lines icon and making use of the range of glyphs at your disposal. Josh Emerson22 takes this a step further and has produced a fantastic walkthrough showing you how to create a font fit for purpose, containing only the glyphs that you need for your project (which consequently keeps resources light and page weight down). IcoMoon4223 is a browser-based app that lets you do something similar by offering a library of pre-selected icons and the option to import SVGs to build your own font.

Unicode Characters Link

Standard system fonts provided us with a false glimmer of hope. The character entity “Chinese Trigram for Sky (Heaven)24” (☰ (U+2630)) is exactly what we are looking for, only it doesn’t render correctly on Android devices. Jeremy Keith has done some research into platform and browser compatibility in his Navicon article25, which concludes that the downward arrow character entity has better cross-platform and cross-browser compatibility for indicating a reveal menu. There are similarly suitable unicode characters like the character entity “Identical to26“. This has much better support than the Trigram for Sky entity (although the geometric shapes aren’t quite in proportion with the icons we have become familiar with).

Live demo28

You can see that the icon retains its sharpness when the user’s browser is zoomed, as a pictographic Web font would. Proportionally it isn’t ideal, although it may provide a good fallback to a more suitable technique.

CSS Link

Tim Kadlec29 and Stu Robson30 have produced the navicon icon in CSS by making clever use of mixing border styles and the :before pseudo selector which works in all major device browsers. While this seems ideal, it isn’t exactly best practice, as we are using CSS to draw a graphic which resides somewhere in that blurred line of whether CSS generated “graphics” are presentational or not.

Live demo32

When the browser zoom level is set to something other than a multiple of 100, the proportions between the generated lines become uneven, which wouldn’t happen in the other solutions presented here. I wouldn’t rule this approach out completely, however, as it serves as a solid workaround when the following approach fails.

The SVG Approach Link

Without doubt, SVG is a good fit for the purpose of crafting the icon. By definition, an icon is a picture or symbol to represent such an action, therefore a scalable vector graphic is the right tool for the job33. The browser draws the SVG based on mathematical parameters, meaning that it is resolution independent. So it will look crisp on whatever pixel resolution or density it is presented on, making it a future friendly34 solution. Support for SVG is pretty good across the contexts we need it for (mainly mobile devices, although some versions of Android don’t support it).

We can cater for browsers that don’t support SVGs by using feature detection. A custom build of Modernizr35 that only checks for SVG provides a lightweight way of testing support for the SVG — if the browser can serve SVGs, then the user should be shown the SVG image. And if the browser can’t, then it should revert to using a bitmap image. After loading Modernizr, checking for SVG support is simple:

if (!Modernizr.svg) {
    $("#svg-icon").css("background-image", "url(fallback.png)");

SVG isn’t widely utilized yet, not as much as it should be. Perhaps it is the lack of mainstream tools to create them. The tools do exist36 though, and we just need to look a bit harder to find them and grow accustomed to them — crafting SVGs should become second nature to us as we enter a new high-definition Web37.

Live demo39

The SVG icon stays sharp when loaded at any resolution, however when the page is zoomed after the initial load, the graphic can begin to blur in certain browsers at irregular zoom levels. The drawbacks in using SVG for retina graphics are found in its limitations for customization in the browser — for example, changing the color of the icon. What seems like a straightforward property change cannot be achieved without JavaScript intervention (or by loading an additional image) which means triggering another HTTP request. Furthermore, if HTTP requests are a concern and you want to load the SVG inline, you will have limited browser support — just be sure to use feature detection to cover all eventualities so the user’s experience isn’t affected. You can download the SVG icon and the PNG fallback40.

To Conclude Link

After reading this you may feel like I’m over-analyzing something so small, and on the surface it may look insignificant when in fact it’s quite the opposite. Building responsively requires more care and attention than we have ever given to our craft. A mobile-first approach invites opportunities for the butterfly effect in our work, in which a bad decision that could impact page weight (or loading redundant resources) for small contexts could be detrimental to the user experience in small contexts and beyond. We, as craftsmen of the Web, have a duty to sensibly inform, instruct and exercise responsible Web design.

Further Resources Link

  • “The Icon Handbook”41 by Jon Hicks
  • “Implementing Responsive Design” by Tim Kadlec
  • IcoMoon4223, a font-building tool that allows you to import SVGs for responsive designs.

(jvb) (vf)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Jordan Moore is a Web designer and front end developer based in Bangor, Northern Ireland. He is a responsive web design enthusiast with a passion for typography and design theory. Jordan documents such thoughts and experiments on his blog. And you can follow Jordan on Twitter.

  1. 1

    Michal Rusina

    October 8, 2012 4:41 am

    SVGs wont work on android phones & tablets (tested on galaxy nexus & 4.1.1). they crash the browser…

    • 2

      Running 4.1.1 on my Nexus 7, using Chrome for Android, the SVG works beautiful. So probably it only crashes in the stock browser?

      • 3

        Yup, once people start using Chrome or Firefox on their mobile devices the user experience will be much better.

    • 4

      You should use feature detection to serve the icon appropriately (have a look at the 4th paragraph from the bottom) :)

    • 5

      Chakib Tsouli

      October 8, 2012 8:34 am

      You can always stick to Jpeg and use the @2x function to adapt your graphics to retina screens.

      • 6

        For UI-Related Images Yes. For Content Images (Photographs) no; You can but it’s overkill.

        Merely do what the likes of Thomas Fuchs have provided comprehensive information about: Make the image double the dimensions you intended them to be, lower the quality of the image to about 15-25 and make it the sole image using CSS or the attribute tags to make the image be the original dimensions you intended.

        You have a retina-ready image without dealing with media queries. Again, this is more viable for content images and dynamic websites where it can be a pain to bother with multiple versions of a content image at all times.

        For Logos and images of that nature, you use the preferred method of your choosing to accommodate HiDPI-resolution devices. I’ve chosen historically the polyfill by Scott Jehl.

        Finally, you should use PNG more than JPEGs if you’re not going to go the Canvas or SVG route, especially for art-focused or UI-oriented graphics. JPGs should be used sparingly and if not only for photographs meant to be consumed strictly as content.

        • 7

          Can you explain why PNGs should be used over JPEGs? JPEGs often offer a much lighter file size, and as long as you don’t need transparency, isn’t this a perfect solution for a lot of things, like a repeating background?

          • 8

            In the context of 1 or 2 colour icons, pngs make more sense. They’re lossless which in many contexts will mean a larger filesize, but not with images with so few colours and such a small size.

  2. 9

    Interesting look at the various menu icon’s in use today. It’s also a key turning point for the applications as well and not just responsive layouts on websites. Applications like the latest build of Google Chrome have switched its renowned gear cog menu icon for the 3 lines icon instead, which better describes the menu it holds, as the browser has developed over the years, a lot of none settings related options now appear within the menu and therefore were being misrepresented by the gear cog icon for the user, which could of caused users confusion in finding options.

    It is something that is going to eventually need consistency, with more people adopting a responsive layout and with the constant increase in mobile smartphone use, both the web and desktop services are going to need an approach which will work best in all environments for their users.

  3. 10

    Always nice to have a gentle reminder that care and attention are paramount, Jordan, thanks. I also noticed the three horizontal icon when Chrome updated to 22 and thought it was perfect. Replacing the spanner might confuse some users but if the icon is a direct replacement perhaps they’ll learn this new “visual word” and it’s meaning.

  4. 11

    Great article! You did a great job of showing examples of how something that looks small and insignificant to the average person can actually have huge impact on functionality of a site. I’d love to see some stats or an experiment on how much poor design choices can impact a web site.

  5. 12

    I ditched SVG and PNG icons in favor of an icon font, as it has been easier to maintain and is more cross browser. I generally use the thee lines icon for mobile navigation.

    • 13

      Font Icons can be a mixed bag as far as effectiveness, especially on Retina Displays. While the implementations that are out there have improved, they are shaky in fidelity on retina displays and simply changing colors can be a pain.

      However, a lot of these original problems have become obsolete arguments against Font icons on retina displays for some implementations of Font Icons.

      Nonetheless, a lot of due diligence has to be done that makes it somewhat a pain.

  6. 14

    Like the collection..

    Thanks for sharing
    Mufeed Ahmad

  7. 15

    Chris Williams

    October 8, 2012 6:12 am

    The JS method for using Modernizr to control CSS is really useful. I’m more partial to adding a class name and letting CSS control the style however. It’s the same approach as before, but more familiar for those used to writing exception code for .ie classes (not that we should be support old browsers of course).

    Great article.

  8. 16

    Jordan, I am already linking to modernzr on my site. (Im using the Twitter Bootstrap) My question is where do I plug in the code for the SVG fallback. Your help is appreciated!

    • 17

      Can anyone else please help me out? Where do I plug this into?
      if (!Modernizr.svg) {
      $(“#svg-icon”).css(“background-image”, “url(fallback.png)”);

      In my HTML or a JS file?

      • 18

        Hey Eddie,

        Ensure Modernizr is loaded correctly, then put the code between script tags and double check the target object matches the names of the objects in your code.

  9. 20

    My tendency (and habit in reading) has gone for the trigram/lines. I see it as a matter of efficiency, inasmuch as it is a straightforward UTF-8 symbol. I’ve also seen it more often then I’ve seen the others, in the context described. The cog *definitely* implies app preferences and could be used *alongside* the trigram for *just that*. (An alternative to the cog being, of course, the familiar encircled “i”.) The blocks imply to me a screenful of icons (e.g., an exit from the app to the “home” screen) and I’ve seen it often placed at upper left for just that purpose. These are my choices for “universality”. (FWIW, along with Brendan Mitchell’s “blog icon”.)

    • 21

      The encircled “i” to me implies Information or Help. I definitely would not look at it if I was looking for the settings…

  10. 22

    Jason Occhipinti

    October 8, 2012 6:33 am

    Hey Jordan!

    Great article – this piece is going into my link library of mobile design patterns! One tiiiny thing though:

    “Perhaps it is the lack of mainstream tools to create them (SVG).” – Whaaaaa? Illustrator isn’t “mainstream?” Did you really mean “universally affordable (free)?”

    Thanks for sharing!!!

    • 23

      Hey Jason,

      Thanks for your feedback, how could I forget the Illustrator community? It’s a great tool for creating SVGs, I would love to see Adobe bring this capability across the more popular products like Photoshop and Fireworks to meet the demand for today’s multi-definition web.

      Many thanks,

  11. 26

    Kevin Haggerty

    October 8, 2012 6:43 am

    In practice, sometimes the three horizontal lines don’t always work nicely with all designs.

    Sometimes you want something classier.

    For example, I’m using the ampersand symbol for my responsive menus in the upcoming redesign of my product, Edit Room. I wrote about it briefly, with some examples here:

    • 27

      Sorry, I would never think to click on the ampersand in your example. It just looks like you have to menu options “New Screen” and “Set Review ON” with an unnecessary ampersand between as a design element. Ampersand in English joins two similar nouns/phrases, which is what it looks like it’s doing here.

      • 28

        Kevin Haggerty

        October 9, 2012 7:25 am

        Hey Dags, thanks for the feedback I’ll take that under consideration!

    • 29

      Hey Kevin,

      I agree, I had a similar chat with Brad Frost about this – it’s a good default, but like other assets on a page it may need to adapt to suit the brand. Eg can you imagine Nike using 3 lines to represent the menu when their closest rivals Adidas are represented by a similar mark?

      It depends on the use case.

      Many thanks,

  12. 30

    Google’s Chrome is now using the three horizontal lines, where it used to use a cog, for it’s customize menu. This serves to reinforce the horizontal lines as more of a “more stuff here” button rather than “settings and options” that the cog seems to represent.

  13. 32

    and last but not least Chrome uses the trigram as its menu icon…

  14. 33

    Nice article. Certainly a choice we are running into with great frequency. Target audience, for me, is a big part of the decision. Some audiences may not be quite ready for a non text based ‘menu’ action. Also, it seems to me if you need device detection to determine your choice, there is a better way. I’ve been opting for icon fonts in my projects and it’s working like a charm.

  15. 34

    I still think the 3 lines is a bad choice for the menu icon.
    Not only do the lines indicate “text” for me but the icon is also too similar to the list and other tekst-icons in for example tiny-mce. A lot of clients are aware of those icons as they are also used in Word etc.

    Also one down-arrow seems good at first but when you think about it. An arrow down in history means… “go down”. So a user would think that when clicking you would go down the page like pressing the spacebar.

    One suggestion is the Evernote solution with the three arrows (can see when you write a note). So you actually have a combination of the two mentioned.

    When I think about it I would actually suggest an icon with 4 small horizontal solid rectangles with the second one of the rectangles a bit lower. Because you should think about standards and general ideas people have of a website menu. Most web navigation’s are horizontal. The four items represent the standard buttons of a menu. most sites show the active menu item which is in this case presented by the lower rectangle. The lower rectangle also symbolizes the fact that it can be pressed down/activated like a button/ menu item.

    Anyone else agrees or a better suggestion?
    (Sorry for my English (I’m Dutch))

    • 35

      I see your point and I definitely agree with you on the fact that we need some sorts of standardisation on this as users will be more comfortable with and used to such navigation patterns. However, I do not fully grasp your idea on the 4 rectangles as it doesn’t remind me of a submenu at all. Can you elaborate on this? Please read my thoughts as well and I like to hear your feedback on this.

    • 36

      That’s the point though. It is meant to signify a vertical list. It’s the same as TinyMCE and Word, although you are viewing and not creating the list. I think people visiting a website would have an expectation that they’d only be viewing a list. It only makes sense when the design displays a vertical list on click – it’s not appropriate in other situations.

      • 37

        @ Dags, I would agree with you if I haven’t been working in this field with clients from young to old (and even older). In these years you soon realize that most people don’t share our designers (developers) way of things. They don’t care if a button is signifying a vertical list or not. In this case I would even dare to say that they don’t even see it as a list or submenu but as the main menu/ navigation. And most people Like Ray (under) states expect a menu to be in the top of the screen (horizontal). Look at your browser now.. the tabs and menu are in the top and horizontal.
        So for all the users to understand what an icon means I would say that the menu icon would not necessarily need to represent “something it actually is” but “something people expect it to be”. A horizontal navigation/ menu icon representing all old-school menus that people have been using since the early days of the internet. Whether it slides down or slides in from the left would not matter. It just means “navigate through the site”.

        Ps. when there is decided that the three lines-icon is here to stay because of the big players using it. I would hope that in time the-designers would maybe make it look more like a vertical folded map. The tree lines-icon is in my opinion really representing “text” so we should find a better one. Like this?

        • 38

          I get where you are going with the map thing (turning the linked image to a portrait orientation).

          I’m not sure it would be effective, but I understand the sentiment regarding trying to make lemonade. For sure, that trigram, in the ignorance of its actual meaning, conveys lines of text – having been used in conjunction with the bent-corner-paper “document” icon for so long (and it is still being used that way).

          However, I am glad to see you point out both experience as the basis of wisdom, as well as proposing a “navigation” object of some sort to convey the purpose of the so-called “navicon.”

          To everyone else:

          Seriously, I bet if you saw the icon before you were told what it was supposed to represent, you’d look at those three lines and think “text” or “paragraph” or “justify” or (insert something to do with text here). But for the setup and explanation before you saw the icon, dollars to donuts, you wouldn’t have thought “menu” or “navigation.” Well, without explanation is *exactly* the situation users are going to be in.

          It doesn’t help the argument for the bars that word processors and rich text editing widgets use similar bars for their “justify” buttons. The bottom line is that bars mean text.

          I mean, argue with this:

  16. 39

    Mikko Tapionlinna

    October 8, 2012 8:18 am

    I’d like to point out that while I do prefer the font approach to provide icons (quite very darn much thank you) there’s a problem. As usual, it resides in Microsofts corner.

    Windows phone does not support webfonts. At all. (AFAIK)

    So if any of you very smart web developers could suggest a solution to fix webfonts on windowsmobile, I’d really appreciate it. (It would mean that I would not have to generate bunch of png icons just for those darned phones)

  17. 40

    When having built a responsive site yourself (with a team), you know all the ins and outs of that website. A submenu using off-screen techniques, like the Facebook app does, being placed under a (rather small) three-lined icon, is a 100% logical and easy to find option. However, after having seen others using such website, they have trouble finding the submenu on their own or simply overlook it. The latter being extremely unfortunate, as the user misses a huge chunk of the website and – highly probable – not satisfied.

    There are a couple of options possible:
    – increase the size of the icon and/or change the colours so it is in more contrast with the rest of the page, making it a more outstanding icon
    – replace the three-lined icon with an icon that has the text ‘menu’, with an optional small arrow indicating how the menu will appear i.e. a down arrow means the menu will reveal from the top

    A couple of notes regarding the menu button:
    – whilst it may not be 100% internationally be regarded as ‘menu’, it does mean the same in lots of languages. Additionally, the word ‘menu’ will only be used when the site’s language is familiar with it i.e. an Arabic website will highly probable use the Arabic word for it.
    – It is highly recommended to be written in the button as plain text, instead of set into an image, as tools such as Google Translate can also translate it
    – Using an arrow next to the word ‘menu’, causes the user to be prepared where the submenu will come from. Whilst this may sound odd to many, subconsciously we like to be prepared on what’s coming. This all results in a better experience for the user, causing him to be more comfortable with the website and thus more content.

    • 41

      Andrew Richardson

      October 8, 2012 10:32 am

      I agree. I don’t think the “Three horizontal lines” is widely accepted as a “menu” yet. I think we probably need more visual cues to make sure users understand there is a pull down, especially for mobile. The cost of clicking is high because mobile internet speeds are slow so users will hesitate to click on something they don’t understand. Mobile users are very efficient with their clicking when compared to desktop users.

      • 42

        Thanks for the addition! Users definitely need some guidance with regards their browsing behaviour. In that sense, in my regard many need to be aware of the fact and term Responsive Webdesign. There are a lot of common knowledge aspects throughout all the users, whilst browsing the web. RWD and its navigation patterns need to be one of these as well. Hopefully we can reach a phase where this can be more or less standardised.

    • 43

      I agree with much of what you say, Jelmer. In fact, I wonder why we need an icon at all when (at least for those of us working on English language sites) the word “Menu” is already so short, and its meaning in a web context is widely understood. And as you say, it can be in plain text.

      How much space do we save by using an icon? It’s like people who abbreviate June and July as Jun and Jul: they must be in one hell of a hurry if they don’t have time to add the final “e” or “y”!

      Is there really anything to be gained by using an icon — especially given the possibilities for misunderstanding?

      • 44

        I 100% agree with you on that, Keith. When talking about space, the use of ‘menu’ is as efficient as a wrench or three lines would be.

        Though most of the time it isn’t about space, but about design and style of a website. In a certain case, a three-lined icon would be much more appropriate/fit more than ‘menu’ would. See the conversation of Smashing Mag and Brad Frost as well on this

  18. 45

    The most recent update to Google Chrome has also brought the three horizontal lines as the new icon for the extended menu.

    It’s good to see consistency even to the extent of the large corporations (such as Google)!

  19. 46

    Nexii Malthus

    October 8, 2012 11:33 am

    A significant advantage that is often overlooked to Pictographic Web Fonts, is that you can reuse a lot of the existing CSS properties related to text and fonts.

    Most significantly being the color property, which means you can very easily dynamically style the icons, which is important for subtle cues necessary to actions such as clicks, hovers, drags, touches, etc.
    Especially as this can be optimised with transition animations.

    This makes web fonts way more powerful than SVGs and especially over images.

    The only option a step beyond web fonts is to use canvas.

  20. 47

    Keith Knowles

    October 8, 2012 12:08 pm

    Great article. I am working on a site now and have the three horizontal lines in use and the client (a mobile app development company) said that it wasn’t clear to them that this is how they access the menu. I found this comment odd coming from such a company. I told them this icon was a relative standard and so far it is staying. If they push, maybe I’ll add the word “Menu” in there. But this goes to show that we’re still a ways away from this being mainstream.


↑ Back to top