https://github.com/gustavocadev/hamburger-qwik
Animated hamburger menu icons for Qwik.
https://github.com/gustavocadev/hamburger-qwik
hamburger-menu menu qwik toggle
Last synced: 5 months ago
JSON representation
Animated hamburger menu icons for Qwik.
- Host: GitHub
- URL: https://github.com/gustavocadev/hamburger-qwik
- Owner: gustavocadev
- License: mit
- Created: 2023-08-30T16:37:34.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-26T21:05:51.000Z (almost 2 years ago)
- Last Synced: 2026-01-13T21:18:50.590Z (6 months ago)
- Topics: hamburger-menu, menu, qwik, toggle
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/hamburger-qwik
- Size: 215 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Animated hamburger menu icons for Qwik
Hamburger menu icons for Qwik, with CSS-driven transitions. Created to be as elegant and performant as possible. This means no JavaScript animations, no transitions on non-cheap properties and a small size.
This package is a port of [hamburger-react](https://github.com/cyntler/hamburger-react).
## Installation
```sh
pnpm add hamburger-qwik
```
or
```sh
npm install hamburger-qwik
```
## Size
When using one hamburger, ~1.5 KB will be added to your bundle (min + gzip).
## Usage
[Visit the website](https://hamburger-qwik.netlify.app) for full documentation, API and examples. A basic implementation looks as follows:
```js
import Hamburger from 'hamburger-qwik';
```
```js
const isOpen = useSignal(false);
```
```jsx
```
Or without providing your own state:
```jsx
...} />
```
## Yet another hamburger library?
Yes. Since the creation of these burgers in 2015 a lot of similar ones have appeared, with one or more of the following downsides:
- Animations that don't feel natural
- Transitions on expensive properties (jerky animations)
- No Qwik support
- Size (additional dependencies besides Qwik or no tree shaking)
- Not customizable, or too customizable (no sensible defaults)
- Doing too much
## Accessibility
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 with the `enter` key, and the icon element has the recommended accessibility attributes (such as `role`). You can use the `label` property to supply an ARIA label for the icon.
## Support
The icons are hooks-based, and will work with Qwik 1.0.0 ('the one with hooks') or higher.