The Infinity Hamburger Menu, now in Web Component form

A whimsical hamburger menu* that goes on forever.

*Not actually a functioning menu.

First open sourced in 2015 as a vanilla not-web-component and inspired by a hamburger menu on 24ways.org. I’ve been absolutely delighted when folks have sent me various messages over the years saying that they loved the menu. Add some whimsy to your personal site, it’s fun!

Notably, the commit updating the code from a CSS/JavaScript component to a Shadow DOM encapsulated standalone JavaScript component might be educational, if you’re interested in that!

This code update resulted in a simplification to the markup (one empty custom element, this is a JavaScript Web Component) and simplified the assets necessary to use it too (a single JavaScript file instead of CSS and JavaScript files).

Using a custom element in this way also unlocks the use of <is-land>, which meant that I got a bunch of features for-free:

1. Only runs the JS when the page is idle (requestIdleCallback).
2. Only runs the JS when the component is visible (if you’re scrolled down, the component JavaScript doesn’t load!).
3. Only runs the JS when the user does not have a reduced motion preference set.
4. Only runs the JS at desktop viewport sizes.

All of the above must be true before the script is loaded. Here’s the markup:

<is-land on:idle on:visible on:media="(prefers-reduced-motion: no-preference) and (min-width: 61.1875em)">
	<infinity-burger></infinity-burger>
	<template data-island>
		<script type="module" src="/static/infinity-burger.js"></script>
	</template>
</is-land>

Demo

Click or tap the hamburger menu icon on the top of this page (at desktop viewport sizes). Standalone demo also on GitHub pages.

Get it

• Source code on GitHub
• Install it on your own web site via npm with npm install infinity-burger or by downloading infinity-burger.js manually.

Related reading:

• Who Designed the Hamburger Icon? —Gizmodo
• The Hamburger Menu-Icon Debate —The Atlantic