Vanilla Hamburger

Animated hamburger menu icons for modern web apps (1.8 KB) 🍔
Alternatives To Vanilla Hamburger
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Ionicons17,08725,24884520 days ago151July 10, 2023287mitTypeScript
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
Omi12,74722962 days ago278May 18, 2023105otherJavaScript
Web Components Framework - Web组件框架
Dark Mode Toggle1,0843a month ago55April 17, 2023apache-2.0JavaScript
A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:
Glyphs25997 months ago15August 12, 20217mitJavaScript
Dynamic design system for building and managing large icon sets in Figma and packaging them for the web
a year ago1mitJavaScript
Web Components to turn your web app into a fake operating system
Vanilla Hamburger117
8 months ago5October 23, 20201mitTypeScript
Animated hamburger menu icons for modern web apps (1.8 KB) 🍔
Coral Spectrum10525 days ago172May 18, 202359apache-2.0JavaScript
A JavaScript library of Web Components following Spectrum design patterns.
33 years ago82August 31, 202064bsd-3-clauseJavaScript
A design library for building Location Intelligence applications.
Vaadin Icons581152 years ago11March 18, 2019apache-2.0HTML
Vaadin Icons is a collection of 600+ unique icons designed for web applications
Toggle Icon21
5 years ago4JavaScript
toggle-icon is a custom element created with Polymer. It provides an extremely powerful and customizable switch that looks like a paper-icon-button.
Alternatives To Vanilla Hamburger
Select To Compare

Alternative Project Comparisons


vanilla-hamburger is a port of hamburger-react to vanilla Custom Elements.


  • Small: Just 1,8 KB (minified and gzipped). Size Limit controls the size.
  • Fast: Built with standards based Custom Elements.
  • Bulletproof: Written in strict TypeScript and covered by 30+ tests.
  • Framework-agnostic: Can be used with any framework.
  • Simple: Uses native <button> with a click listener internally.
  • Accessible: Follows WAI-ARIA guidelines for toggle buttons.
  • No dependencies

Live demo


npm install vanilla-hamburger --save

Or use one of the following content delivery networks: CDN:

<script type="module" src=""></script>

Skypack CDN:

<script type="module" src=""></script>


<tilt-burger size="lg" label="Menu"></tilt-burger>
<script type="module">
  import 'vanilla-hamburger';

  const burger = document.querySelector('tilt-burger');
  burger.addEventListener('pressed-changed', (event) => {
    const pressed = event.detail.value;

ES modules

vanilla-hamburger is authored using ES modules which are natively supported by modern browsers. However, it also uses "bare module imports" which are not yet standardized and require a small transform.

We recommend the following tools for the ES modules based development:

None of these tools are needed when importing the component from CDN.

Available variants

vanilla-hamburger provides 13 separate elements for different hamburger types.

File to import HTML element
"cross-burger.js" <cross-burger>
"fade-burger.js" <fade-burger>
"pivot-burger.js" <pivot-burger>
"rotate-burger.js" <rotate-burger>
"slant-burger.js" <slant-burger>
"sling-burger.js" <sling-burger>
"spin-burger.js" <spin-burger>
"spiral-burger.js" <spiral-burger>
"squash-burger.js" <squash-burger>
"squeeze-burger.js" <squeeze-burger>
"tilt-burger.js" <tilt-burger>
"turn-burger.js" <turn-burger>
"twirl-burger.js" <twirl-burger>

When using one hamburger, ~1.8 KB will be added to your bundle (min + gzip).


The following properties can be used to customize hamburger elements:

Property Default Description
direction left The animation direction of the icon, left or right.
disabled false When set to true, the internal <button> id disabled.
distance md The distance between the lines: sm, md or lg.
duration 0.4 The duration of the animation. Can be set to zero.
easing cubic-bezier(0, 0, 0, 1) A valid transition-timing-function CSS value.
label hamburger Accessible label set on the internal <button>.
pressed false Set to true when element is pressed.
size 32 Size of the icon. Should be a number between 12 and 48.

Note: direction property is not supported by <squash-burger> and <squeeze-burger>.

Overriding styles

vanilla-hamburger exposes CSS Shadow Parts allowing to override the default styles:

cross-burger {
  color: #999;

cross-burger[pressed] {
  color: #666;

cross-burger[disabled] {
  opacity: 0.7;

cross-burger::part(bar) {
  border-radius: 9em;

cross-burger::part(button) {
  outline: none;
  background: currentColor;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s;

cross-burger::part(button):hover {
  opacity: 0.12;

cross-burger::part(button):focus {
  opacity: 0.16;

Base classes

vanilla-hamburger provides a set of base classes that can be imported without registering custom elements. This is useful if you want to create your own hamburger icon with a different tag name.

import { Cross } from 'vanilla-hamburger/lib/entrypoints/cross.js';

customElements.define('custom-burger', class extends Cross {});


It is recommended to have a tap/click area of at least 48x48 pixels. Therefore, padding will be added around the icon to create a surface of exactly this size.

Keyboard interaction is provided using native <button>, which dispatches the click event on Enter and Space keys. The underlying native button has aria-pressed attribute set based on the pressed property.

Remember to use label property to provide an accessible label for the native button.

TypeScript support

vanilla-hamburger supports TypeScript and ships with types in the library itself; no need for any other install.

All the included custom elements are compatible with lit-analyzer and lit-plugin extension for Visual Studio Code, so you can benefit from type checking in lit-html templates.

Browser support

vanilla-hamburger uses Custom Elements and Shadow DOM, and does not support IE11 or legacy Edge.

Why vanilla-hamburger?

vanilla-hamburger has all the benefits of hamburger-react with one important difference.

While hamburger-react does not have direct dependencies, it still expects you to use React. This means that Angular, Vue, Svelte or vanilla JS users would have an extra dependency in their apps.

Now when all the evergreen browsers support standards based Custom Elements, it's perfect time to build such tiny and lightweight UI controls as web components rather than framework components.

Popular Icon Projects
Popular Webcomponents Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Custom Elements