Nothing matches your search.

Lightweight Hamburger Navicons

Tasty little hamburgers.

The ubiquitous hamburger menu button. Whether you love it or hate it, the hamburger button is a well-worn convention for toggling menus or options. This article explores alternative, lightweight methods of generating hamburgers using HTML and CSS.

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.

Unicode Hamburger

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 &#9776 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 :hover.

Unicode Hamburger in Action

See the Pen Navicon - Unicode by Christopher Murphy (@Splode) on CodePen.

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.

.menu-icon {
  background: linear-gradient(to bottom, #000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%, #000 100%);

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

See the Pen Navicon - CSS Gradient by Christopher Murphy (@Splode) on CodePen.

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.