Animated hamburger menu icons for React
npm install hamburger-reactā

ā
Hamburger menu icons for React, 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.
sh
npm install hamburger-react
`Size
When using one hamburger, ~1.5 KB will be added to your bundle (min + gzip).Usage
Visit the website for full documentation, API and examples. A basic implementation looks as follows:`js
import Hamburger from 'hamburger-react'
`
`js
const [isOpen, setOpen] = useState(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 React support
- Size (additional dependencies besides React 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.