Zach’s ugly mug (his face) Zach Leatherman

The Infinity Hamburger Menu, now in Web Component form

November 18, 2023

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


< Newer
The Tension and Future of Jamstack
Older >
An Attempted Taxonomy of Web Components

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 77 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

8 Reposts

Tom Arild JakobsenJakub Iwanowski :bash:Zach LeathermanwestbrookBruce B AndersonBob MonsourCory Dransfeldt :prami:Jean Pierre Kolb

17 Likes

Moritz GießmannJakub Iwanowski :bash:⛧Satanist⛧lucianoAlex MKushChee Aun ????westbrookNeblibBruce B AndersontbesedaSwiftChristopherPhil GiammatteiNick FCory Dransfeldt :prami:Miriam (still)
9 Comments
  1. Zach Leatherman

    Zach Leatherman

    no, *you’re* updating 8 year old code to be web components on saturday afternoon

  2. Djwebdroid

    Djwebdroid

    @zachleat You be the funniest! :)

  3. Matt Steele

    Matt Steele

    @zachleat

  4. Zach Leatherman

    Zach Leatherman

    @mattdsteele ???? I know this reference!!

  5. Jason Garber

    Jason Garber

    @zacHleaT Zach did yOUr haMBURgEr Go woKe Go Broke

  6. Zach Leatherman :verify:

    Zach Leatherman :verify:

    @jgARbeR if YOU ArE aLWayS tiREd DOes thAT MEaN You’RE TOO WOkE

  7. Jason Garber

    Jason Garber

    @zachleat two out of two parents of small children surveyed in this household agree

  8. Zach Leatherman :verify:

    Zach Leatherman :verify:

    @jgarber lemme get a second opinion from 4 out of 5 dentists

  9. Jason Garber

    Jason Garber

    @zachleat i'm most interested in the objections of the fifth dentist

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)