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

$3

npm i --save react-zoburger-menu

$3

yarn add react-zoburger-menu

Usage

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

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.

$3

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

$3

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

`jsx
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.