{"id":14990402,"url":"https://github.com/web-padawan/vanilla-hamburger","last_synced_at":"2025-05-05T16:22:05.637Z","repository":{"id":56204060,"uuid":"294943413","full_name":"web-padawan/vanilla-hamburger","owner":"web-padawan","description":"Animated hamburger menu icons for modern web apps (1.8 KB) 🍔","archived":false,"fork":false,"pushed_at":"2023-02-09T08:43:16.000Z","size":1157,"stargazers_count":121,"open_issues_count":3,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-03T02:05:43.211Z","etag":null,"topics":["burger","custom-elements","hamburger","hamburger-menu","vanilla","web-components","webcomponents"],"latest_commit_sha":null,"homepage":"https://web-padawan.github.io/vanilla-hamburger/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/web-padawan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-12T12:53:12.000Z","updated_at":"2025-03-29T01:13:35.000Z","dependencies_parsed_at":"2024-09-24T16:02:07.396Z","dependency_job_id":null,"html_url":"https://github.com/web-padawan/vanilla-hamburger","commit_stats":{"total_commits":67,"total_committers":2,"mean_commits":33.5,"dds":"0.014925373134328401","last_synced_commit":"52ffb9a0a3bba7ec3245f3c99761636f1d694e77"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-padawan%2Fvanilla-hamburger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-padawan%2Fvanilla-hamburger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-padawan%2Fvanilla-hamburger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-padawan%2Fvanilla-hamburger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/web-padawan","download_url":"https://codeload.github.com/web-padawan/vanilla-hamburger/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252531882,"owners_count":21763293,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["burger","custom-elements","hamburger","hamburger-menu","vanilla","web-components","webcomponents"],"created_at":"2024-09-24T14:20:04.860Z","updated_at":"2025-05-05T16:22:05.576Z","avatar_url":"https://github.com/web-padawan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://web-padawan.github.io/vanilla-hamburger/\"\u003e\n    \u003cimg alt=\"Preview\" src=\"https://raw.githubusercontent.com/web-padawan/vanilla-hamburger/master/preview.gif\" height=\"80\" width=\"310\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.org/package/vanilla-hamburger\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/vanilla-hamburger.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/web-padawan/vanilla-hamburger/actions\"\u003e\n    \u003cimg alt=\"build\" src=\"https://github.com/web-padawan/vanilla-hamburger/workflows/tests/badge.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=vanilla-hamburger\"\u003e\n    \u003cimg alt=\"gzip size\" src=\"https://badgen.net/bundlephobia/minzip/vanilla-hamburger\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/vanilla-hamburger\"\u003e\n    \u003cimg alt=\"no dependencies\" src=\"https://badgen.net/bundlephobia/dependency-count/vanilla-hamburger\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003evanilla-hamburger\u003c/strong\u003e is a port of \u003ca href=\"https://github.com/luukdv/hamburger-react\"\u003ehamburger-react\u003c/a\u003e to vanilla Custom Elements.\n\u003c/p\u003e\n\n## Features\n\n- **Small**: Just 1,8 KB (minified and gzipped). [Size Limit](https://github.com/ai/size-limit) controls the size.\n- **Fast**: Built with standards based Custom Elements.\n- **Bulletproof**: Written in strict TypeScript and covered by 30+ tests.\n- **Framework-agnostic**: Can be used [with any framework](https://custom-elements-everywhere.com/).\n- **Simple**: Uses native `\u003cbutton\u003e` with a `click` listener internally.\n- **Accessible**: Follows [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#button) guidelines for toggle buttons.\n- **No dependencies**\n\n## Live demo\n\n- [Website](https://web-padawan.github.io/vanilla-hamburger/)\n- [Angular example](https://components.studio/edit/B6UIy18tBWekjsdlcIzg)\n- [LitElement example](https://components.studio/edit/MwlJAn0K1B5neVtunpFI)\n- [React example](https://components.studio/edit/1Cta6NtUgJSSgyOYXB2n)\n- [Svelte example](https://components.studio/edit/uL3KYNle783i1ehAlXJa)\n- [Vue example](https://components.studio/edit/rsRiCxbap2Gh0wl3JZJn)\n\n## Installation\n\n```\nnpm install vanilla-hamburger --save\n```\n\nOr use one of the following content delivery networks:\n\n[unpkg.com CDN](https://unpkg.com/vanilla-hamburger?module):\n\n```html\n\u003cscript type=\"module\" src=\"https://unpkg.com/vanilla-hamburger?module\"\u003e\u003c/script\u003e\n```\n\n[Skypack CDN](https://cdn.skypack.dev/vanilla-hamburger):\n\n```html\n\u003cscript type=\"module\" src=\"https://cdn.skypack.dev/vanilla-hamburger\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n```html\n\u003ctilt-burger size=\"lg\" label=\"Menu\"\u003e\u003c/tilt-burger\u003e\n\u003cscript type=\"module\"\u003e\n  import 'vanilla-hamburger';\n\n  const burger = document.querySelector('tilt-burger');\n  burger.addEventListener('pressed-changed', (event) =\u003e {\n    const pressed = event.detail.value;\n  });\n\u003c/script\u003e\n```\n\n## ES modules\n\n**vanilla-hamburger** is authored using ES modules which are [natively supported](https://caniuse.com/es6-module)\nby modern browsers. However, it also uses \"bare module imports\" which are [not yet standardized](https://github.com/WICG/import-maps)\nand require a small transform.\n\nWe recommend the following tools for the ES modules based development:\n\n- [`@web/dev-server`](https://modern-web.dev/docs/dev-server/overview/) resolves bare module imports on the fly.\n- [`snowpack`](https://www.snowpack.dev) performs one-time transform when installing dependencies.\n- [`@rollup/plugin-node-resolve`](https://github.com/rollup/plugins/tree/master/packages/node-resolve) is needed when using Rollup.\n\nNone of these tools are needed when importing the component from CDN.\n\n## Available variants\n\n**vanilla-hamburger** provides 13 separate elements for different hamburger types.\n\n| File to import        | HTML element       |\n| --------------------- | ------------------ |\n| `\"cross-burger.js\"`   | `\u003ccross-burger\u003e`   |\n| `\"fade-burger.js\"`    | `\u003cfade-burger\u003e`    |\n| `\"pivot-burger.js\"`   | `\u003cpivot-burger\u003e`   |\n| `\"rotate-burger.js\"`  | `\u003crotate-burger\u003e`  |\n| `\"slant-burger.js\"`   | `\u003cslant-burger\u003e`   |\n| `\"sling-burger.js\"`   | `\u003csling-burger\u003e`   |\n| `\"spin-burger.js\"`    | `\u003cspin-burger\u003e`    |\n| `\"spiral-burger.js\"`  | `\u003cspiral-burger\u003e`  |\n| `\"squash-burger.js\"`  | `\u003csquash-burger\u003e`  |\n| `\"squeeze-burger.js\"` | `\u003csqueeze-burger\u003e` |\n| `\"tilt-burger.js\"`    | `\u003ctilt-burger\u003e`    |\n| `\"turn-burger.js\"`    | `\u003cturn-burger\u003e`    |\n| `\"twirl-burger.js\"`   | `\u003ctwirl-burger\u003e`   |\n\nWhen using one hamburger, ~1.8 KB will be added to your bundle (min + gzip).\n\n## Properties\n\nThe following properties can be used to customize hamburger elements:\n\n| Property    | Default                    | Description                                             |\n| ----------- | -------------------------- | ------------------------------------------------------- |\n| `direction` | `left`                     | The animation direction of the icon, left or right.     |\n| `disabled`  | `false`                    | When set to true, the internal `\u003cbutton\u003e` id disabled.  |\n| `distance`  | `md`                       | The distance between the lines: `sm`, `md` or `lg`.     |\n| `duration`  | `0.4`                      | The duration of the animation. Can be set to zero.      |\n| `easing`    | `cubic-bezier(0, 0, 0, 1)` | A valid `transition-timing-function` CSS value.         |\n| `label`     | `hamburger`                | Accessible label set on the internal `\u003cbutton\u003e`.        |\n| `pressed`   | `false`                    | Set to true when element is pressed.                    |\n| `size`      | `32`                       | Size of the icon. Should be a number between 12 and 48. |\n\n**Note**: `direction` property is not supported by `\u003csquash-burger\u003e` and `\u003csqueeze-burger\u003e`.\n\n## Overriding styles\n\n**vanilla-hamburger** exposes [CSS Shadow Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)\nallowing to override the default styles:\n\n```css\ncross-burger {\n  color: #999;\n}\n\ncross-burger[pressed] {\n  color: #666;\n}\n\ncross-burger[disabled] {\n  opacity: 0.7;\n}\n\ncross-burger::part(bar) {\n  border-radius: 9em;\n}\n\ncross-burger::part(button) {\n  outline: none;\n  background: currentColor;\n  border-radius: 50%;\n  opacity: 0;\n  transition: opacity 0.5s;\n}\n\ncross-burger::part(button):hover {\n  opacity: 0.12;\n}\n\ncross-burger::part(button):focus {\n  opacity: 0.16;\n}\n```\n\n## Base classes\n\n**vanilla-hamburger** provides a set of base classes that can be imported without registering custom\nelements. This is useful if you want to create your own hamburger icon with a different tag name.\n\n```js\nimport { Cross } from 'vanilla-hamburger/lib/entrypoints/cross.js';\n\ncustomElements.define('custom-burger', class extends Cross {});\n```\n\n## Accessibility\n\nIt is recommended to have a tap/click area of at least 48x48 pixels. Therefore, padding will be\nadded around the icon to create a surface of exactly this size.\n\nKeyboard interaction is provided using native `\u003cbutton\u003e`, which dispatches the `click` event on\n\u003ckbd\u003eEnter\u003c/kbd\u003e and \u003ckbd\u003eSpace\u003c/kbd\u003e keys. The underlying native button has `aria-pressed` attribute\nset based on the `pressed` property.\n\nRemember to use `label` property to provide an accessible label for the native button.\n\n## TypeScript support\n\n**vanilla-hamburger** supports TypeScript and ships with types in the library itself; no need for any other install.\n\nAll the included custom elements are compatible with [lit-analyzer](https://www.npmjs.com/package/lit-analyzer) and\n[lit-plugin](https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin) extension for Visual\nStudio Code, so you can benefit from type checking in lit-html templates.\n\n## Browser support\n\n**vanilla-hamburger** uses [Custom Elements](https://caniuse.com/#feat=custom-elementsv1) and [Shadow DOM](https://caniuse.com/#feat=shadowdomv1),\nand does not support IE11 or legacy Edge.\n\n## Why vanilla-hamburger?\n\n**vanilla-hamburger** has all the benefits of [hamburger-react](https://github.com/luukdv/hamburger-react#yet-another-hamburger-library) with one important difference.\n\nWhile `hamburger-react` does not have direct dependencies, it still expects you to use React. This\nmeans that Angular, Vue, Svelte or vanilla JS users would have an **extra** dependency in their apps.\n\nNow when all the evergreen browsers support standards based [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements),\nit's perfect time to build such tiny and lightweight UI controls as web components rather than framework components.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-padawan%2Fvanilla-hamburger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweb-padawan%2Fvanilla-hamburger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-padawan%2Fvanilla-hamburger/lists"}