Easy Hamburger Menu Icon

The “hamburger” icon – a vertical stack of equal-length lines – universally means “click me for menu!” It makes sense: menus are often vertical lists of navigation options.

I first saw this sweet technique on Grooveshark’s mobile site for making the hamburger icon using simple CSS. It’s pretty genius, and I’ve started using it wherever there’s need for that hamburger dude. Here’s your HTML:

<a href="#menu" class="menu-button">Menu!</a>

And here’s the styling:

.menu-button {
    background-color: #333;
    border-radius: .25rem;
    font-size: 0;
    line-height: 0;
    padding: .75rem .5rem;
}
.menu-button::after {
    content: " ";
    border-color: #ccc;
    border-style: solid none double;
    border-width: 4px 0 12px;
    display: block;
    height: 4px;
    width: 2rem;
}

The key is CSS borders. Note the border-style on .menu-button::after: it has a solid style, which forms the top line, and a double style, which forms the bottom two lines. One could easily add :focus, :hover and :active states to make it respond to interaction.

(Unfortunately, using em units doesn’t always make for equal lines, so I stick with pixels. Also, make sure you include pixel fallbacks for the rem units.)