The Unicode character for menu icons ("navicons")

Here's a helpful tip for those who need a basic, three-line navigation menu icon. It's just a simple Unicode character.

This is actually a Chinese glyph (the trigram for heaven), but in the western world you'd be more apt to recognize it as the "hamburger" navigation menu icon. It's available as the following HTML entity:

&#9776; <!-- Results in ☰ -->

Here's how you might use it in a navigation menu:

<a id="nav-toggle" href="#">&#9776;</a>

The trouble with images

You can also create a raster image (JPEG, GIF, or PNG) to create your menu icon, but then you're waiting on another HTTP request and for the image to load. You also won't have any control over the color of it, and sizing could be an issue if you need to scale it up. SVG might be a better alternative, but it's still not faster than plain-text.

Alternatives

A couple other methods I've seen involve using borders and pseudo elements to draw the menu icon. These are decent alternatives because they don't require additional HTTP requests and can be made to scale nicely, but the amount of code doesn't compare to the single character solution above.

If you're interested in some of these alternatives, check out this article about "navicons" on CSS Tricks.

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.