https://github.com/substrate-system/hamburger
Hamburger menu as web component
https://github.com/substrate-system/hamburger
Last synced: 6 months ago
JSON representation
Hamburger menu as web component
- Host: GitHub
- URL: https://github.com/substrate-system/hamburger
- Owner: substrate-system
- License: mit
- Created: 2024-06-24T04:26:56.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-08-25T05:54:36.000Z (10 months ago)
- Last Synced: 2025-08-25T22:37:48.149Z (10 months ago)
- Language: TypeScript
- Homepage: https://substrate-system.github.io/hamburger/
- Size: 83 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# hamburger
[](./dist/index.d.ts)
[](README.md)
[](https://semver.org/)
[](package.json)
[](LICENSE)
A hamburger menu, implemented as a web component.
- [install](#install)
- [use](#use)
- [example](#example)
* [bundler](#bundler)
* [HTML only](#html-only)
- [API](#api)
* [events](#events)
* [attributes](#attributes)
* [CSS variables](#css-variables)
- [credits](#credits)
## install
```sh
npm i -S @substrate-system/hamburger
```
## use
This is a web component. Just import the JS and CSS, then you can use the tag
in your HTML.
## example
* see code in [./example](./example/)
* [See a live demonstration](https://substrate-system.github.io/hamburger/)
### bundler
With a bundler such as [vite](https://vitejs.dev/),
```js
// just import, then we can use the tag in HTML
import '@sustrate-system/hamburger'
import '@sustrate-system/hamburger/style.css'
// import the application CSS, because we are defining some CSS variables
import './index.css'
```
### HTML only
You can use the files in this module directly by linking in your HTML.
First, copy the files to a location accessible to your web server. This package
includes minified files.
#### JS
```sh
cp ./node_modules/@sustrate-system/hamburger/dist/index.min.js ./public/hamburger.js
```
#### CSS
```sh
cp ./node_modules/@sustrate-system/hamburger/dist/style.min.css ./public/hamburger.css
```
Then link to them in HTML:
```html
Example
```
## API
### events
Two custom events, `open` and `close`.
```js
const burger = document.querySelector('hamburger-menu')
burger?.addEventListener('open', ev => {
debug('open')
})
burger?.addEventListener('close', ev => {
debug('close')
})
```
### attributes
#### transition
Take an attribute `transition` to set the time, in milliseconds that it takes
for the menu to transition in and out of the viewport.
Default is 200ms.
This corresponds to a CSS variable, `--hamburger-transition`, which is the
transition time as a CSS property. Eg, in CSS,
```css
hamburger-menu {
--hamburger-transition: .8s
}
```
corresponds with this HTML:
```html
```
> [!NOTE]
> 800 milliseconds is 0.8 seconds.
### CSS variables
Define several CSS variables to customize the appearance.
```css
:root {
--hamburger-bgc: var(--white); /* hamburger background color */
--hamburger-color: var(--purple); /* hamburger text color */
--hamburger-hover-color: var(--bright-white); /* hover state text color */
--menu-bgc: var(--white); /* background color for the expanded menu */
--menu-color: var(--purple); /* text color for expanded menu */
--menu-hover-bgc: var(--purple); /* hover background color inside menu */
--menu-hover-color: var(--white); /* hover text color inside menu */
--menu-width: 200px;
--hamburger-transition: .2s; /* default is .2s */
}
```
## credits
Based on [this codepen page](https://codepen.io/vxdiazdel/pen/wzvNGy).