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.