Maybe you’ve seen a variant of the navigation icon (NavIcon) in your mobile browser when viewing websites built on responsive or adaptive design. It usually indicates that there is a menu that can be expanded or opened.

You might be curious about how the NavIcon found its way into popular web development, so I will explain a little about its origin, touch on standards a bit, or the lack thereof, and then show you a sample code snippet that creates a “trigram” icon using pure CSS. I will close with another resource to more CSS-generated icons.

Beginnings

Using simple pictures to communicate important information has been with us for centuries, from hieroglyphics to drawings on cave walls to street signs. Icons today take on many forms and we are seeing more uses for them in web enabled applications and documents. The birth of the NavIcon is a direct result of the ever changing online experience that moves our websites into smaller screens, responding and adapting to the ever changing browser window sizes.

NavIcon standards

Is there a standard for the NavIcon? None that I have seen, but most of them that use the horizontal bars will have three across, so I suppose my example above with four bars is taking it to another level. The NavIcon is not the only commonly-encountered icon that you’ll see on many a website and menu bar. The plus (+) and minus (-) symbols designate menus that can be opened or closed, expanded or collapsed. Other familiar icons that mean roughly the same thing are the grid that looks like the side of a small Rubik’s cube, and the unordered list icon, similar to the bars, but with bullets to the left, shown in Figure B. What is a web developer to do?

All of the NavIcon examples have their place, depending on the application and website content; however, it could be confusing to some users if you’re not careful. If you have the plus icon on a calendar page or online form, for example, it might make visitors think that they can add or create an event or enter some content into a form once the plus icon is clicked.

Creating a NavIcon with pure CSS

Since some mobile devices are known to have issues with rendering small icons it makes sense to create a solution that will render the same effect with CSS only. Below is a snippet of CSS code to create what is called the “trigram icon” from Tim Kadlec’s solution, he also has the code on GitHub, which helps to answer the mobile image rendering dilemma.

li {
list-style-type: none;
}
#menu {
position: relative;
}
#menu a {
padding-left: 1.25em; /* 20px/16px */
}
#menu a:before {
content: "";
position: absolute;
top: 30%;
left:0px;
width:.75em; /* 12px/16px */
       height:.125em; /* 2px/16px */
border-top: .375em double #000; /* 6px/16px */
border-bottom: .125em solid #000; /* 2px / 16px */
}

The “trigram icon” example is displayed zoomed in at 400% and in normal view in Figure C below.

If you are interested in exploring more CSS icons you can visit Nicholas Gallagher’s page entitled Pure CSS GUI icons (experimental) and his demo page where you will find 84 GUI icons ranging from general categories including User Interaction, Media Controls, and Miscellaneous. All of these icons are created from semantic HTML and have been tested to work in Firefox 3.5+, Chrome 5, and Opera 10.6.