This is by far the most popular icon used to represent the navigation button: ≡.

The hamburger icon was created by Norm Cox in 1981. Norm's intention with this icon was to "…mimic the look of the resulting displayed menu list." (http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787).

In other words, the hamburger icon's real name is the list icon.

Now, if we think about it, the hamburger icon is semantically correct because it represents exactly what is displayed when it's triggered: a list of items. However, some UX studies have revealed that the hamburger icon isn't as effective as we may think, and yet we see it all over the place in both responsive sites and mobile apps.

Although the hamburger icon has several cons, it's a matter of time before practically everyone is able to recognize this icon as a representation of navigation.

The bottom line is that there's nothing wrong with using the hamburger icon as long as we follow the target size recommendations and make the links inside the navigation bar easy to tap on small screens.

The advantages are as follows:

The disadvantages are as follows:

If you plan to use the hamburger icon, don't bother using images of any kind or any CSS techniques with borders or box shadows. Keep it simple. All you need to do is use the Unicode character 2261 (≡).

In the following examples, we are going to use a well-known technique to hide content (with a few variations to fit our demos): the Kellum Method. This method is not in any way a hack or anything similar; we are not trying to deceive our users or the search engines with this approach. We're actually being quite mindful of the improved accessibility the navigation icons gain by leaving the text in the markup so that users with assistive technologies can still access the menus. Consider the following example.

The HTML is as follows:

<button class="hamburger-icon"><span>Menu</span></button>SCSS
//Hamburger Icon
.hamburger-icon  {
    //Basic styling, modify if you want
    font-size: 40px;
    color: #666;
    background: #efefef;
    padding: 0 10px;
    border-radius: 3px;
    cursor: pointer;
    //Hamburger Icon
    &:before {
        content: '≡';
    }
    //Hide the term Menu from displaying without sacrificing accessibility
    span {
        display: inline-block;
        width: 0;
        height: 0;
        text-indent: -100%;
        overflow: hidden;
        white-space: nowrap;

    }
}

The result is this one:

Some informal tests on the web have yielded that using the word Menu is the most trusted solution to the drawbacks of the hamburger icon.

However, it's important to note that the studies and tests done by many authors where they compare the hamburger icon versus the word Menu can be misleading, since they are testing different visual languages: an icon versus a word.

For these tests to be fully reliable, they would have to test icon versus icon, and word versus word. For example, testing the hamburger icon against an arrow pointing down or the word Menu against the word Nav.

Let's look at the pros and cons of the word Menu.

The advantages are as follows:

The disadvantage is as follows:

Consider the following example.

Here's the HTML:

<button class="word-menu">Menu</button>

And here's the CSS:

//Word "Menu"
.word-menu {
    //Basic styling, modify if you want
    display: inline-block;
    padding: 16px 8px;
    color: #666;
    font: 12px Arial, "Helvetica Neue", Helvetica, sans-serif;
    background: #efefef;
    border-radius: 3px;
    cursor: pointer;
}

And this is the result:

One alternative to the hamburger icon versus the word Menu discussion is to use both at the same time. Some argue that we may get the best of both worlds by doing this.

The advantages are:

The disadvantage is:

Let's look at two styles that we can use to represent this pattern.

Consider the following example.

The HTML is as follows:

<button class="hamburger-icon-plus-menu style-1">Menu</button>

The SCSS is as follows:

//Hamburger Icon Plus Word "Menu" – Style 1
.hamburger-icon-plus-menu {
    //Basic styling, modify if you want
    display: inline-block;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    background: #efefef;
    color: #666;
    border-radius: 3px;
    cursor: pointer;
}
.style-1 {
    padding: 16px 8px;
    font-size: 16px;
    //Hamburger Icon
    &:before {
        content: '≡ ';
    }
}

The result is as follows:

Consider the following example.

The HTML is:

<button class="hamburger-icon-plus-menu style-2">Menu</button>

The SCSS is:

//Hamburger Icon plus Word "Menu" – Style 2
.hamburger-icon-plus-menu {
    //Basic styling, modify if you want
    display: inline-block;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    background: #efefef;
    color: #666;
    border-radius: 3px;cursor: pointer;
}
.style-2 {
    padding: 4px 12px 6px;
    font-size: 10px;
    line-height: .8;
    text-align: center;
    //Hamburger Icon
    &:before {
        display: block;
        content: '≡';
        font-size: 40px;
    }
}

And here's the result:

You can see a demo I created in CodePen at http://codepen.io/ricardozea/pen/f4ddc6443bc060004b58a7301aae83db.