The Hamburger Navicon
The topic of using hamburger icons for menus is a contentious one. Whether you love it or hate it, the hamburger button is a well-worn and ubiquitous convention for toggling menus or options. This article explores alternative, lightweight methods of generating hamburgers using HTML and CSS.
Believe it or not, there’s a Unicode symbol for the hamburger navicon. This Unicode is actually the Chinese trigram for heaven. To include it, simply insert
☰ into any HTML markup. You can adjust styling for it the same way that you would for any other text with CSS, including size, color, and pseudo-class properties like
Unicode Hamburger in Action
It’s a dead-simple approach, but is limited in that you cannot control the thickness of the individual lines. For greater control in the proportion of the hamburger icon you’ll have to either use an image or a CSS gradient, which we’ll explore next.
CSS Gradient Hamburger
The next example is a bit more complex, but also offers a greater degree of customization. This example uses the linear-gradient function of CSS. Instead of creating a seamless transition between multiple color values, we establish hard breakpoints between a single color and full transparency.
We can alter the proportions of the line-widths to the overall dimensions of the icon by simply alerting the breakpoints of the gradient. The drawback to this technique is that the gradient color cannot be transitioned using the
transition property at this time. To add something like a hover-state on a menu icon, we’ll need to use a different property, like opacity.
CSS Gradient Hamburger in Action
Hamburger on a Diet?
Both of these options offer a lightweight alternative to using an image as a background for an icon. Granted, you may only be shaving off a few kilobytes using these approaches over an optimized .svg or .png graphic. The real power of these techniques shines through when you consider them from a consistency standpoint. Controlling the style of the icon completely within your CSS means that you can create assets that are consistent project-wide and across projects.