Logo

Animated hamburger menu icons

Made for React

Hamburger type:Tilt

import Hamburger from 'hamburger-react'

Direction: left

Hamburger type:Fade

import { Fade as Hamburger } from 'hamburger-react'

Direction: left

Hamburger type:Twirl

import { Twirl as Hamburger } from 'hamburger-react'

Direction: left

Hamburger type:Turn

import { Turn as Hamburger } from 'hamburger-react'

Direction: left

Hamburger type:Sling

import { Sling as Hamburger } from 'hamburger-react'

Direction: left

Hamburger type:Spin

import { Spin as Hamburger } from 'hamburger-react'

Direction: left

Hamburger type:Squash

Direction: n / a

import { Squash as Hamburger } from 'hamburger-react'

Installation

$npm install hamburger-react

Properties & examples

color
#000
string
Example:

The color of the icon bars, accepts any CSS-parsable argument.

<Hamburger color="#4FD1C5" />
direction
left
string
Example:

The animation direction of the icon, left or right.

<Hamburger direction="right" />
duration
0.4
float / int
Example:

The duration of the animation. Can be set to zero if no animation is desired.

<Hamburger duration={0.8} />
hideOutline
true
boolean
Example:

Hides the default browser focus style.

<Hamburger hideOutline={false} />
rounded
false
boolean
Example:

Specifies if the icon bars should be rounded.

<Hamburger rounded />
size
32
integer
Example:

A number between 12 and 48, which sets the size of the icon.

<Hamburger size={20} />
toggled
undefined
boolean
toggle
undefined
function
Example:

A way to provide your own state.

const [isOpen, setOpen] = useState(true)

<Hamburger toggled={isOpen} toggle={setOpen} />
onToggle
undefined
function
Example:

A callback which receives a single boolean argument, indicating if the icon is toggled. Inspect your browser console after tapping/clicking the example above.

<Hamburger onToggle={toggled => {
  if (toggled) {
     // open a menu
  } else {
     // close a menu
  }
}} />

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).

More information

Visit the GitHub repository for additional information about usage and the motivation behind this package.

hamburger-react is a project by Luuk. Logo by Stutpak.