Logo

Animated hamburger menu icons

Made for React

Hamburger type:Tilt

import Hamburger from 'hamburger-react'

Direction: left

Hamburger type:Squash

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

Direction: not applicable

Hamburger type:Cross

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

Direction: left

Hamburger type:Twirl

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

Direction: left

Hamburger type:Fade

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

Direction: left

Hamburger type:Slant

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

Direction: left

Hamburger type:Spiral

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

Direction: left

Hamburger type:Divide

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

Direction: not applicable

Hamburger type:Turn

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

Direction: left

Hamburger type:Pivot

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

Direction: left

Hamburger type:Sling

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

Direction: left

Hamburger type:Squeeze

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

Direction: not applicable

Hamburger type:Spin

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

Direction: left

Hamburger type:Rotate

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

Direction: left

Installation

$npm install hamburger-react

When using one hamburger, ~1.5 KB will be added to your bundle (min + gzip).

Properties & examples

toggled
undefined
Type:
boolean
toggle
undefined
Type:
function
Example:

A way to provide your own state.

const [isOpen, setOpen] = useState(false)

<Hamburger toggled={isOpen} toggle={setOpen} />
size
32
Type:
integer
Example:

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

<Hamburger size={20} />
direction
left
Type:
string
Example:

The animation direction of the icon, left or right.

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

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

<Hamburger duration={0.8} />
distance
md
Type:
string
Example:

The vertical distance between the lines. Small (sm), medium (md) or large (lg).

<Hamburger distance="lg" />
color
currentColor
Type:
string
Example:

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

<Hamburger color="#4FD1C5" />
easing
cubic-bezier(0, 0, 0, 1)
Type:
string
Example:

A valid `transition-timing-function` CSS value.

<Hamburger easing="ease-in" />
onToggle
undefined
Type:
function
Example:

A callback which receives a single boolean argument, indicating if the icon is toggled. This can be used to perform an action after toggling, or as an alternative to providing your own state. Inspect your browser console after tapping/clicking the example above.

<Hamburger onToggle={toggled => {
  if (toggled) {
     // open a menu
  } else {
     // close a menu
  }
}} />
rounded
false
Type:
boolean
Example:

Specifies if the icon bars should be rounded.

<Hamburger rounded />
label
undefined
Type:
string
Example:

An ARIA label to improve accessibility.

<Hamburger label="Show menu" />
hideOutline
true
Type:
boolean
Example:

Hides the default browser focus style.

<Hamburger hideOutline={false} />

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.

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.

NPMYarnGitHubContact