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.