Data URIs for navicon (hamburger menu) icons

The "hamburger" icon is becoming a staple of modern UI design. Users see those three lines and immediately know that a menu lies beneath. There are many approaches to getting them into your app, including border hacks, box-shadow hacks, etc. Here's an approach that uses a very small data URI to get the job done.

The HTML

Pretty basic. Just a link:

<a href="#" class="navicon">Menu</a>

The CSS

.navicon {
    /* This is all that's required */
    position: relative;

    /* This just makes it look like a button for the demo */
    font-family: sans-serif;
    color: white;
    text-decoration: none;
    background: black;
    border-radius: 4px;
    padding: .5em .75em .5em 2em;
    display: inline-block;
}

.navicon:before {
    position: absolute;
    top: 50%;
    left: .75em;
    width: .8em;
    height: .8em;
    margin-top: -.4em;
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    
    /* white navicon */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHMAAABkCAMAAACCTv/3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////5ubmueBsSwAAAAJ0Uk5T/wDltzBKAAAAPklEQVR42uzYQQ0AAAgDseHfNC4IyVoD912WAACUm3uampqampqamq+aAAD+IVtTU1NTU1NT0z8EAFBsBRgAX+kR+Qam138AAAAASUVORK5CYII=);
    
    /* black navicon */
    /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHMAAABkCAMAAACCTv/3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFAAAA5ubmSUUG+gAAAAJ0Uk5T/wDltzBKAAAAPklEQVR42uzYQQ0AAAgDseHfNC4IyVoD912WAACUm3uampqampqamq+aAAD+IVtTU1NTU1NT0z8EAFBsBRgAX+kR+Qam138AAAAASUVORK5CYII=);*/
}

The result

Navicon Example

Of course, you can scale it up and down as needed. The original image is 100px by 115px, but only about 250 bytes as a data URI, so it's very quick to load.

The only drawback to this method compared to a border hack is that it may render blurry at certain sizes. However, the tradeoff for ease of use may be worth it. Enjoy!

 

Author avatar

About the author

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.