Grow your CSS skills. Land your dream job.

Three Line Menu Navicon

Published by Chris Coyier

A universal symbol for "menu" has been on a lot of people's minds lately. ("Navicon", get it?!). Jordan Moore wrote up a big article on it for Smashing Magazine. Jeremy Keith wrote about it. Stuart Robson wrote about it. Tim Kadlec wrote about it. If you want to read more about the thinking behind this stuff and see examples, read those.

In this article I'm going to focus on the "three line" symbol (as opposed to down arrows or other possible navicons). I quite like the three line symbol as a symbol to represent menus. If we have to pick one, I'm all for this one.

We're going to look at the "how" to create this symbol in a bunch of different ways.

threelines

Use an Image

How have we put symbols onto websites for... ever? Images. There is nothing wrong with this. This image is so simple it begs for SVG. SVG means it's 1) super small file size and 2) can scale to any size crisply. The HTML would probably be:

<a href="#menu">
  <img src="menu.svg" alt="">
  Menu
</a>

If you are going to use the symbol unaccompanied by text, make sure to include the alt text.

If you have to support IE 8 and down or anything else that doesn't support SVG, you could 1) just use a PNG instead or 2) Use Modernizr to swap out the SVG for a PNG (or vice versa depending on which browser you want to penalize with an extra request).

This amounts to essentially:

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

Use a Pseudo Element

There is nothing wrong with using an element, but if we use a pseudo element and some trickery, we could make this symbol without the extra HTTP request that an image requires. (Yeah, it could be in your sprite, but you know what I mean).

Pseudo box-shadow

Nothing but semantic markup:

<a href="#menu" class="box-shadow-menu">
  Menu
</a>

In CSS, make some space on the left of the link with some padding-left. Set the positioning context with relative positioning. Then make a single black line absolutely positioned into that space on the top left. Then using box-shadow, make two more lines beneath it.

.box-shadow-menu {
  position: relative;
  padding-left: 1.25em;
}
.box-shadow-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1em;
  height: 0.15em;
  background: black;
  box-shadow: 
    0 0.25em 0 0 black,
    0 0.5em 0 0 black;
}

Pseudo gradient

Same markup as the one above. Same idea of creating a space for the pseudo element to go. Only this time, use gradients to create the three lines. Remember gradients don't actually need to fade color from one to another if you use "hard stops" where the color changes to another instantly at the same color-stop.

.gradient-menu {
  padding-left: 1.25em;
  position: relative;
}
.gradient-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.21em;
  bottom: 0.21em;
  width: 1em;
  background: linear-gradient(
    to bottom, 
    black, black 20%, 
    white 20%, white 40%, 
    black 40%, black 60%, 
    white 60%, white 80%, 
    black 80%, black 100%
  );
}

Pseudo border

Credit to Mr. Robson on this one. He created it by applying a double and a single solid border to the pseudo element. He also used pixel values in his demo. Tim Kadlec converted them to ems so they scale with text which is nice.

.border-menu {
  position: relative;
  padding-left: 1.25em;
}
.border-menu:before {
  content: "";
  position: absolute;
  top: 0.25em;
  left: 0;
  width: 1em;
  height: 0.125em;
  border-top: 0.375em double #000;
  border-bottom: 0.125em solid #000;
}

Use Fonts

There is a unicode symbol with three lines in it.

<a href="#menu">
  &#9776; Menu
</a>

You would think that would be perfect, but in reality it ends up quite blurry. Looks OK on my retina display but pretty bad on non-retina. This kind of thing should be as crisp as can be anywhere.

You could always use an icon font as well. Entypo has this symbol in their free set. The lines are rounded, which looks good to me. Pictos has one with dot-line dot-line dot-line which is also good.

I haven't had too much trouble with icon fonts being blurry like that unicode icon is. I have no clue why that it, but c'est la vie.

Update: reader G S writes in:

Regarding the article http://css-tricks.com/three-line-menu-navicon/, an older Nokia phone with Opera 12 is able to display the unicode character for 'IDENTICAL TO' (U+2261), but not the TRIGRAM FOR HEAVEN' (U+2630).

It would seem that a mathematical operator is more likely to be implemented in fonts than an iChing symbol.

Which is best?

Meh. This was more exploratory fun than anything else. I don't think any of them stand way far out ahead to the point where I'd recommend one over another. For me, I'd probably end up using an icon font since I'm probably already using an icon font and then there is consistency with the rest of the project.

Demo

Here's a demo on CodePen:

Update: a bit of interesting research from Jordan Moore:

kindle

Comments

  1. alan
    Permalink to comment#

    “I quite the three line symbol”
    “You would think that would be prefect”
    Minor errors

  2. mariovials
    Permalink to comment#

    El unicode es genial!

    • I put through Google Translate and:

      Unicode is great!

      I normally agree, but as you can see above: blurrytown.

    • Permalink to comment#

      I don’t see anything blurry about the unicode version (latest stable Chrome and FF on Win7). Chris, can you take a screenshot of exactly what you see when you say it’s blurry?

      The only thing I do notice about the unicode version is that it looks much different on FF (more vertical space between lines) compared to Chrome, whereas the other versions look pretty much the same on both.

    • @Louis -

      Small: http://cl.ly/K461

      Big: http://cl.ly/K3ty

      Both blurry to me.

    • I agree with Louis, the unicode version looks just fine on Windows 7.

    • Maurice
      Permalink to comment#

      Chris, I took a look at both in Opera, Firefox, Chrome, and Safari (all up-to-date and on Mac – Snow Leopard) and the Unicode versions do come out blurry. Maybe Windows has a ‘crisper’ Unicode set or renders differently than Mac (insert joke here).

    • Permalink to comment#

      Ok… it looks like anti-aliasing to me, because it’s not just lines, but actually a text character. I pretty much see the same thing on mine, but it just didn’t bother me. But yes, the other versions are definitely crisper. When you said “blurry” I was imagining some big fog. :)

      Would be interesting if HTML/CSS had a way to say “don’t anti-alias this” (or is it cleartype?) or whatever.

    • James
      Permalink to comment#

      For what it’s worth I’m on a Mac and the Unicode one looks crispy as can be.

      Must be a combination of factors.

    • thomas
      Permalink to comment#

      Late but still worth noting. The blur can be fixed by using text-rendering: geometricPrecision; on the unicode element.

  3. Just curious if there’d be a problem with building it out using block elements styled in css. the markup would be a little cumbersome, but the end result would be responsive, and you’d be able to use transitions on it in interesting ways.

    • … let’s try that again

      <a href=”#” class=”menu”>
      <span class=”horizLine”></span>
      <span class=”horizLine”></span>
      <span class=”horizLine”></span>
      <span class=”hide”>Open Menu</span>
      </a>

    • Permalink to comment#

      Christopher,

      You have just created three unnecessary elements would you could accomplish the same with one element.

    • I realize that, Aaron, but wouldn’t the ends justify the means in this case? The result would be as flexible as an SVG without relying on browser support or additional assets (like modernizr, or a symbol font). It’d depend on only a couple CSS rules, and load as fast as any other block element on the page.

  4. Permalink to comment#

    Perfect. I was just lookin’ how to implement this icon !
    There is also this unicode charactere “identical to” , a bit tiny.
    I think I’ll try the pseudo element because I’m not using an icon font for now on my current project.

    Anyway, as usual : Thanks Chris !

  5. Permalink to comment#

    I find the Bootstrap solution kind of interesting. It uses a sprite three times; once for each line!

    
    
                
                
                
    
    
    
  6. bill
    Permalink to comment#

    Chrome’s latest build replaces the wrench with this three line icon. Personally I prefer the wrench as the three lines reminds me of a vent cover.

    • Permalink to comment#

      Exactly; speed holes. They make the browser faster.

    • James
      Permalink to comment#

      Also I’m pretty sure that the original intention of the icon was for ‘Sorting’, I might have made that up though.

      As a menu icon it works for though, really it’s about familiarity and pervasiveness – and I think this icon is already there.

  7. Permalink to comment#

    Hmm, on Firefox your .svg is blurry and the unicode is crisp. That’s just me…

  8. Mat Marquis
    Permalink to comment#

    I did some experimenting with Unicode for this sort of thing, and a lot of mobile browsers are gonna have a hard time with it—Android (2.2–3.0) and Blackberry (5–7), in particular, if memory serves. They’ll either get a blank space or a “broken” character, like a rectangle or somesuch.

  9. Permalink to comment#

    I love the idea of a universal menu item. One thing that I keep thinking about, though, is the use of this type of icon for reordering list items as well. You know, the drag n’ drop to reorder things. What do you guys think. Should we use something else for reorder functionality, or should we rethink the menu icon?

    • Matt C.
      Permalink to comment#

      I honestly thought of this same thing. I love this icon and users are getting the hang of it meaning menu, so what do we now do with reordering do we give them something like the the movable cursor icon to signify that it can be reordered?

    • Permalink to comment#

      I think the dotted square (I have no example in my mind right now) you see sometimes can be the reorder icon.

  10. Permalink to comment#

    If you’re using SVG, why not save the bandwidth and include the markup directly.

    Menu

    <a href="#">
      <svg width="10" height="10">
        <path d="M0,1 10,1" stroke="#000" stroke-width="2"/>
        <path d="M0,5 10,5" stroke="#000" stroke-width="2"/>
        <path d="M0,9 10,9" stroke="#000" stroke-width="2"/>
      </svg>
      Menu
    </a>
    

    You’d only need to load a PNG for the crusties.

    • cnwtx
      Permalink to comment#

      My thought exactly! That’s much easier than another http request for the same data.

    • Kevin
      Permalink to comment#

      With the exception of the width and height being explicitly defined, it seems in theory a worthwhile alternative.

  11. Krypto
    Permalink to comment#

    @Chris I agree with you that the Unicode one looks blurry compared to the Pseudo Element one when viewing on Mac 10.8.2 and FF 15.0.1

  12. I’d say probably a good 97% of people still don’t recognize the icon’s meaning, and it’s going to take quite some time for it to catch on.

    At this stage it’s probably a good idea to have it alongside the word ‘menu’, putting it on its own will just confuse people.

    • Where does 97% come from? Is there a study or is that just made up?

      Remember: Facebook and Google Chrome use it unaccompanied by text. Pretty big players there to risk users not understanding now to navigate the app.

    • Hooray for made-up statistics!

      I’m not sure why an icon would confuse people? To me the concept of an icon without text is simple – I’d rather be unsure as to what the icon represents the first time I press it and then, upon immediately discovering it’s purpose, be happy I don’t have text there for the remaining billion times I push said icon. Lack of a label almost unintentionally implies that one can ‘figure it out’, instead of ‘we are going to label this icon indefinitely because you cannot learn’.

    • George Hite
      Permalink to comment#

      Remember icons are for sighted users… don’t forget about 12% of WORKING-Age individuals who are disabled… (poor eyesight, color-perception impairment, physical ailment such as Carpal Tunnel Syndrome, cognitive impairment, and etc.) Note: this is from actual studies if you need the sources please let me know…

      But even not considering disabled people we need text for other reasons you may not have considered: For example, someone might use a screen reader in their car to read out navigation directions or a flight itinerary while driving so they can keep their eyes on the road.

      I think as technologies improve and converge, the more we develop with accessibilities the more we get a competitive edge in the near future. Remember accessibility means anyone and anything can access the information… that means any OS, any browser, any technology and any person regardless their abilities.

  13. Permalink to comment#

    That’s a very interesting discussion, I think that each method can be a good solution from case to case.

    For example, a while ago I used a base64 string for my responsive CSS3 dropdown here. Assuming that my three line menu navicon will be visible only for certain media queries, older browsers would be excluded (because they don’t support media queries) so I thought using this method is appropriate.

    Now, considering the retina displays, my solution doesn’t sound so good anymore :)

  14. Clint Fern
    Permalink to comment#

    Latest Chrome on XP shows a box on unicode – the broken character Mat mentions above. Fine in other browsers.

  15. verpixelt
    Permalink to comment#

    I don’t get it. After failing to rebuild the gradient method I have copied the code from codepen and I dont get the black lines. Anyone else with the sam issue?

    • verpixelt
      Permalink to comment#

      -solved. Better check prefixr -.-‘ thanks again chris

  16. Mike M.
    Permalink to comment#

    That’s great, but you just made a “list view” icon.

    • Funny, but again, HUGE apps and sites are using this to represent menus, so mind-saturation of what this icon means is happening as we speak. What it means to you as a developer or someone who has preconceived notions of what this three line thing means is less important that what it means to a user looking at it.

    • Mike M.
      Permalink to comment#

      I’ve seen it, too, but all it did in my case was confuse me and hide what the control was supposed to do. I think gears and wrenches and whatnot are slightly more indicative of such menus, but even they are far from ideal, as they require a pretty big metaphorical leap. Regardless of how huge a company Google is, I still think it’s a bit of a boneheaded pick — but hey, maybe they did a study that showed people remembered the visual concept of menus (a list of text items) better than the idea of what menus let them do.

    • Permalink to comment#

      I think it’s easy to see the difference between a list view icon and a menu icon in this case.
      List views are usually accompanied by other icons to represent the different states like: grid view.

      Also list icons usually have an extra dot or block in front of each of the lines to show it like a bulleted list.

  17. kgscott284
    Permalink to comment#

    3 things.

    Excellent post.
    Unicode is blurry for me on win 7 in all browsers…
    To argue that it isn’t recognized as the “Menu” button is effing ludicrous. Factual information and logical deduction clearly point to it as damn near the standard for a menu icon….

  18. Permalink to comment#

    While the fact that there is unicode that will work for it; you should absolutely NOT be using Unicode to represent this symbol.

    It’s the definition of a hack. CSS or SVG/IMG are a better way. Using the Chinese Trigram ☰ (Heaven) should be heavily discouraged.

  19. The box-shadow and gradient are the crispiest chips in the bag. They also work like a charm at various sizes. I’m 110% sure on this decision.

    Three lines are here to stay. Soon we’ll be able to scribe the magical three lines into rock so others may understand our mystical interface iconography.

  20. Permalink to comment#

    Interesting read, even if, as you said, tons of peaople already talked about it. It’s always interesting to have your point of view! :-)

    I think too that wee need a standard icon for navigation menus and this seems like an appropriate one. People using Facebook (mobile) are used to it and since it’s probably one of the most used mobile App, it’s fair to assume that it became a standard. And for people not knowing it, a simple tap of curiosity will do the trick for the first time they see it.

    I’m not shocked by the use of an image. I’m not a big fan of using “hacks” to have a result that simple images like this can do.

    If this is the only image you have on your site, it’s probably worth finding another option. If not, it’s a small icon that you can easily add to your sprites.

  21. Permalink to comment#

    Personally I’m quite fond of the icon Microsoft use on their home page:

    I had a play around and came up with an approximation using CSS pseudo-elements.

  22. Subash
    Permalink to comment#

    Both look nearly same. I didn’t see any blur in my windows 8 pc with chrome but ie10 is useless. It blurs everything even the text is blurred, crap ie. If osx was available for common pc windows would have died long ago and (gates in the gate for g4 security)

  23. End
    Permalink to comment#

    Someone mentioned that this “menu icon” looks alot like what is often used for a “list view” icon. Should we still be using the same icon for “list view” then?

  24. JC
    Permalink to comment#

    If you intend on using a lot of smaller icons on your website then I would consider using “font awesome” which has this, and many other very handy symbols included for free.

  25. Nico
    Permalink to comment#

    I think the SVG Version is the most fexible. You can change the Image / Vector to any other Icon when the Mobile Developement thinks that another Icon is more right then the three Bars.

    Its a good way to bring Vectors instead of static Images to Websites as well. I think we will see that a lot in the future when we got newer displays and higher resolutions.

  26. I CSS this icon a while ago but as a mobile drag handle, I used background-size instead ;)

    http://codepen.io/seanjacob/pen/pBDmK

    div:before { content:''; position:absolute; top:0.25em; left:0; width:1em; height:0.75em; background-image:-webkit-linear-gradient(top, black 30%, transparent 30%); background-size:100% 0.3em; }

  27. Permalink to comment#

    Even though the three lines navicon looks like a grab handle for sortable lists (like on iOS etc) I still think its a great little icon for menus too.

    Google seem to be using it everywhere, back buttons, menu buttons, more info buttons, anything that navigates to a page with listed data.

  28. Keep in mind that images can be very restrictive with regards to skinning. If that’s something that matters for your site, be sure to take that into consideration and use one of the other techniques Chris mentions or (if your tech requirements allow), use the SVG directly in your CSS.

  29. Funkyscript
    Permalink to comment#

    Another version using single borders, padding, and content-box background-clip:

    .border-menu {
        padding-left: 1.25em;
        position: relative;
    }
    .border-menu:before {
        background-clip: content-box;
        background-color: #000;
        border-bottom: 0.125em solid #000;
        border-top: 0.125em solid #000;
        content:"";
        height: 0.125em;
        left: 0;
        padding: 0.125em 0;
        top: 0.25em;
        position: absolute;
        width: 1em;
    }
    
  30. Justin
    Permalink to comment#

    Three Line Menu Navicon for Modern and Legacy Browsers

    http://codepen.io/anon/full/Lxecv

    #navicon {
        display: block;
        width: 1.75em;
        height: .25em;
        line-height: 0;
        border-top: .75em double #000;
        border-bottom: .25em solid #000;
        }
    

    • Nico
      Permalink to comment#

      ‘love it

    • Fran
      Permalink to comment#

      This article was great, but when I tried the pseudo box-shadow and pseudo gradient methods, only the top of the three lines became an active link. Justin, your method is so much cleaner AND makes all three lines into an active link. Thank you!

  31. I will try to implement this in bootstrap. :)

  32. To tie it all together a little bit more, I’ve written a post on the three lines navicon and my thoughts on it’s usage here

    http://alwaystwisted.com/post.php?s=2012-10-12-these-3-lines

  33. Permalink to comment#

    aaawh google jumps on the bandwagon. Google mobile got the sidemenu like the facebook app!

  34. Permalink to comment#

    Retina screen here. Unicode looks fine to me large but the middle line blurry on the small size. My assumption is that it’s using a .5 pixel on something which makes the opacity on the 1px 50% so you get a semi blurry image. Not sure but that’s what my brain told me.

  35. Chris
    Permalink to comment#

    There’s also a html code equiv, instead of whipping out the unicode cavalry.

  36. Permalink to comment#

    What about the symbol for heaven/sky (Qián) in the eight diagrams used in Taoist cosmology?
    It has a different unicode value. It works fine for me.

    ☰ (☰)

    Will that make any difference to ☰ (☰) that you are using in your example?

  37. Permalink to comment#

    Easy solutions are always the best ! I’ll try it ona ma blog.

  38. Permalink to comment#

    This is the easiest and probably the best solution. Thanks

  39. Rotator
    Permalink to comment#

    For different line lengths/thicknesses, try lowercase L lll or capital i III and different sans-serif fonts

  40. Christian
    Permalink to comment#

    I coined the term “navicon” in 1998 and nobody paid attention. Good to see it catching on now.

  41. Permalink to comment#

    probably the best solution, The demo graphic was very helpful too. Thanks

  42. Troels
    Permalink to comment#

    The unicode smoothing issue can be fixed with -webkit-font-smoothing:none – however this only works in relatively recent versions of webkit browsers.

  43. Nicole
    Permalink to comment#

    You are an endless source of inspiration and super helpful tricks! Thanks and thanks again :)

  44. You can also use the unicode math operator . The major difference is the height/width ratio of the two unicode characters.

    Text is going to antialias unless you instruct otherwise.

    Considering 99.99999% of the rest of the UI is antialiased by default I wouldn’t be too concerned about the “blurriness” of a single unicode character. That’s silly talk.

  45. Stf
    Permalink to comment#

    Hello,
    The does not work on (Mac) Safari.
    Must add -webkit- to the style

    background: -webkit-linear-gradient(top, ….

    And it is ok :-)

  46. Nick
    Permalink to comment#

    Great post as usual Chris!

    You could also have combination of pseudo elements and on a nav element and avoid extra markup and requests.

    I put together the following pen to illustrate:

  47. jon
    Permalink to comment#

    Hmmmmh

    Interesting subject but I find it odd that this discussion about a universal symbol for menu is taking place whilst as far as I am aware we have no international symbol for indicating language choice.
    Websites that for one reason or another do not have a URL per language are stuck using flags or risking the fact that attention span deficient users will not search for EN FR DE etc – most savvy website designers realise that only flags will get attention in time – the requirement I feel is an eyecatching symbol not unlike a flag followed by the ISO language codes but the symbol is necessary the codes on their own will not work in the real world.

    I do think to some degree the language blindness of the US has something to do with this.

  48. Permalink to comment#

    Here it has another solution, it’s a page, but if you remove the border, that’s a 4 lines menu

    http://cssdeck.com/labs/css3-monochrome-icon-set

    Is it ok on all your devices ?

  49. clem
    Permalink to comment#

    another way:

    #nav:after{
        content: '-\A-\A-'; 
    }
    

    http://www.sitekickr.com/blog/creating-navicon-icon/

  50. Pro tip: If you’re going to use it, use ≡ not &9776; or ੆

    &#2261 has wider support across browsers.

    http://unicode.johnholtripley.co.uk/2261/

    However, few users are familiar with the pattern, and the “Menu” label on a button tests much more successfully.

    http://exisweb.net/menu-eats-hamburger

  51. Oop. The form rendered it. It’s U+2261. Not 9776 or 2630.

  52. Asad
    Permalink to comment#

    Button with SVG:
    At first I struggled with the button/hyperlink cause the SVG doesn’t allow any click events, realised I was missing this in my css for the svg icon {pointer-events: none;}.
    works like a charm now!

  53. The text-rendering: optimizeLegibility; fixes the Unicode problem.

  54. Adam Crockett

    I just thought of using 3 old school <hr> tags in a button. not to bad if you ask me.

  55. Adamo
    Permalink to comment#

    Another fun alternative I’ve come up with (and used for animation effects):

    <!-- HTML -->
    <a href="#" rel="nofollow">Menu</a>
    
    <!-- CSS -->
    
    
    a.trigram
    {
        display: block; /* Or inline-block */
        font-size: 0;
    
        width: 25px; /* Width of lines */
    
        padding: 4px 0; /* Space between bar lines */
    
        /* Trigram sandwich */
        border-top: 4px solid white !important;     -
        line-height: 4px;                           -
        border-bottom: 4px solid white !important;  -
    
        background-clip: content-box; /* Creates line-height tall colored bar in middle */
        background-color: white;        
    }
    
  56. http://uxfindings.blogspot.com: There is such a hype about this three line mobile menu concept. There is however a bit of research that has revealed that the design of the hamburger icon can lead users to believe that it is actually a drag bar. I’d like to submit the idea that maybe we need some Nanointeraction Design here. Maybe it’s time for a new menu icon…

    A New Menu Icon

    http://uxfindings.blogspot.com/2014/06/a-new-menu-icon.html

  57. Why searching for new design? A minus sign on first line and 2 ‘large minus’ signs (em dash) on line 2 and 3 looks like a menu, it can be made very easily with characters on all OS. May be 4th line can be added, must see the ‘requirements’

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".