{"id":18751138,"url":"https://github.com/substrate-system/hamburger","last_synced_at":"2025-12-11T18:34:26.124Z","repository":{"id":246086123,"uuid":"819215697","full_name":"substrate-system/hamburger","owner":"substrate-system","description":"Hamburger menu as web component","archived":false,"fork":false,"pushed_at":"2025-08-25T05:54:36.000Z","size":85,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-25T22:37:48.149Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://substrate-system.github.io/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/substrate-system.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,"zenodo":null}},"created_at":"2024-06-24T04:26:56.000Z","updated_at":"2025-08-19T03:43:36.000Z","dependencies_parsed_at":"2024-08-05T08:51:34.475Z","dependency_job_id":"a432d125-9431-4e77-adff-b57295d74c08","html_url":"https://github.com/substrate-system/hamburger","commit_stats":null,"previous_names":["nichoth/hamburger","substrate-system/hamburger"],"tags_count":8,"template":false,"template_full_name":"nichoth/template-ts-browser","purl":"pkg:github/substrate-system/hamburger","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fhamburger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fhamburger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fhamburger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fhamburger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/substrate-system","download_url":"https://codeload.github.com/substrate-system/hamburger/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fhamburger/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274873613,"owners_count":25365824,"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","status":"online","status_checked_at":"2025-09-12T02:00:09.324Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-07T17:14:36.988Z","updated_at":"2025-12-11T18:34:26.045Z","avatar_url":"https://github.com/substrate-system.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hamburger\n![tests](https://github.com/substrate-system/hamburger/actions/workflows/nodejs.yml/badge.svg)\n[![types](https://img.shields.io/npm/types/@substrate-system/hamburger?style=flat-square)](./dist/index.d.ts)\n[![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)\n[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver\u0026style=flat-square)](https://semver.org/)\n[![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)\n[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)\n\nA hamburger menu, implemented as a web component.\n\n![Hamburger button closed](image.png)\n![Hamburger button open](image-1.png)\n\n\u003c!-- toc --\u003e\n\n- [install](#install)\n- [use](#use)\n- [example](#example)\n  * [bundler](#bundler)\n  * [HTML only](#html-only)\n- [API](#api)\n  * [events](#events)\n  * [attributes](#attributes)\n  * [CSS variables](#css-variables)\n- [credits](#credits)\n\n\u003c!-- tocstop --\u003e\n\n## install\n\n```sh\nnpm i -S @substrate-system/hamburger\n```\n\n## use\nThis is a web component. Just import the JS and CSS, then you can use the tag\nin your HTML.\n\n## example\n\n* see code in [./example](./example/)\n* [See a live demonstration](https://substrate-system.github.io/hamburger/)\n\n### bundler\nWith a bundler such as [vite](https://vitejs.dev/),\n\n```js\n// just import, then we can use the tag in HTML\nimport '@sustrate-system/hamburger'\nimport '@sustrate-system/hamburger/style.css'\n\n// import the application CSS, because we are defining some CSS variables\nimport './index.css'\n```\n\n### HTML only\nYou can use the files in this module directly by linking in your HTML.\n\nFirst, copy the files to a location accessible to your web server. This package\nincludes minified files.\n\n#### JS\n```sh\ncp ./node_modules/@sustrate-system/hamburger/dist/index.min.js ./public/hamburger.js\n```\n\n#### CSS\n```sh\ncp ./node_modules/@sustrate-system/hamburger/dist/style.min.css ./public/hamburger.css\n```\n\nThen link to them in HTML:\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003c!-- the style --\u003e\n    \u003clink rel=\"stylesheet\" href=\"/hamburger.css\"\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eExample\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- use the element --\u003e\n    \u003chamburger-menu transition=800\u003e\n      \u003ca href=\"#example\"\u003eexample link\u003c/a\u003e\n      \u003ca href=\"#example\"\u003eexample two\u003c/a\u003e\n    \u003c/hamburger-menu\u003e\n\n    \u003c!-- the JS --\u003e\n    \u003cscript type=\"module\" src=\"/hamburger.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## API\n\n### events\nTwo custom events, `open` and `close`.\n\n```js\nconst burger = document.querySelector('hamburger-menu')\n\nburger?.addEventListener('open', ev =\u003e {\n  debug('open')\n})\n\nburger?.addEventListener('close', ev =\u003e {\n  debug('close')\n})\n```\n\n### attributes\n\n#### transition\nTake an attribute `transition` to set the time, in milliseconds that it takes\nfor the menu to transition in and out of the viewport.\n\nDefault is 200ms.\n\nThis corresponds to a CSS variable, `--hamburger-transition`, which is the\ntransition time as a CSS property. Eg, in CSS,\n```css\nhamburger-menu {\n  --hamburger-transition: .8s\n}\n```\n\ncorresponds with this HTML:\n```html\n\u003chamburger-menu transition=800\u003e\n  \u003ca href=\"#example\"\u003eexample link\u003c/a\u003e\n  \u003ca href=\"#example\"\u003eexample two\u003c/a\u003e\n\u003c/hamburger-menu\u003e\n```\n\n\u003e [!NOTE]  \n\u003e 800 milliseconds is 0.8 seconds.\n\n### CSS variables\nDefine several CSS variables to customize the appearance.\n\n```css\n:root {\n  --hamburger-bgc: var(--white);  /* hamburger background color */\n  --hamburger-color: var(--purple); /* hamburger text color */\n  --hamburger-hover-color: var(--bright-white); /* hover state text color */\n  --menu-bgc: var(--white);  /* background color for the expanded menu */\n  --menu-color: var(--purple);  /* text color for expanded menu */\n  --menu-hover-bgc: var(--purple); /* hover background color inside menu */\n  --menu-hover-color: var(--white); /* hover text color inside menu */\n  --menu-width: 200px;\n  --hamburger-transition: .2s;  /* default is .2s */\n}\n```\n\n## credits\n\nBased on [this codepen page](https://codepen.io/vxdiazdel/pen/wzvNGy).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fhamburger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubstrate-system%2Fhamburger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fhamburger/lists"}