React Zoburger Menu

A React component that render an Hamburger button with sweet animations. Based on Jonathan Suh css hamburgers.

React Zoburger Menu on NPM.

Demo

Click here to test library.

Installation

Npm

npm i --save react-zoburger-menu

Yarn

yarn add react-zoburger-menu

Usage

import { Zoburger } from "react-zoburger-menu";

<Zoburger
  animation="vortex-r"
  isActive={isActive}
  onClick={handleZoburgerClick}
  color="teal"
/>;

Animation List

As this is based on Jonathan Suh css hamburgers, the animations' name are the same, here is the list:

3dx
3dx-r
3dy
3dy-r
3dxy
3dxy-r
arrow
arrow-r
arrowalt
arrowalt-r
arrowturn
arrowturn-r
boring
collapse
collapse-r
elastic
elastic-r
emphatic
emphatic-r
minus
slider
slider-r
spin
spin-r
spring
spring-r
stand
stand-r
squeeze
vortex
vortex-r

Props

Props	Type	Required	Default	Description
activeColor	`string`	`false`	`Same as color`	The hamburger's color when `isActive is true`
animation	`string`	`true`	`∅`	The animation mode
className	`string`	`false`	`an empty string`	An optional className that will go on every component's child
color	`string`	`false`	`#000`	The hamburger's color
isActive	`boolean`	`true`	`#000`	Determine hamburger's state
label	`string`	`false`	`∅`	Text displayed next to the hamburger
onClick	`function`	`true`	`∅`	Triggered function when hamburger is clicked
...others	`any`	`false`	`∅`	All the props that an HTML Button can receive (such as id, role, etc ...)

Styling

This component is really easy to customize. You can use css or styled-components if you prefer.

Css

All elements in component have className (+ the one that you can add) which you can target:

Button Element → zoburger__button
Box (the hamburger wrapper) → zoburger__box
Inner ( the bars) → zoburger__inner

Styled components

If you prefer use styled components, you can import the styled components in order to customize them:

import { Styled3dx } from 'react-zoburger';
import styled from 'styled-components;

const Wrapper = styled.div`
  ${Styled3dx} {
    height: 10px;

    &::before, &::after {
      height: 10px;
    }
  }
`

Accessibility

As suggest by Jonathan Suh, i'm using ARIA to make this component more accessible for people with disabilities, with these attributes:

aria-label="Menu"
aria-controls="navigation"
aria-expanded={isActive}
type="button"

Browser Support

Most animations are made with CSS3 transforms property, so it's supported by most browsers BUT IE9, olders, and Opera Mini. More informations.

react-zoburger-menu