A react library for creating animated hamburger menu with CSS transitions.
npm install react-hamburger-menusCongrats! You just saved yourself hours of work by using react-animated-navbars library for creating animated navigation panels

You will also need to import css modules in root your project before using it. dist/react-animated-navbars.cjs.development.css
npm i react-hamburger-menus
yarn add react-hamburger-menus
- Ghost Navbar
- Responsive Navbar
- Ghost Button
- Import GhostNavbar component from react-animated-navbars
- Import styles react-animated-navbars/dist/style.css
``javascript
import React from "react";
import { GhostNavbar } from "react-hamburger-menus";
import "react-hamburger-menus/dist/style.css";
const App = () => {
return (
<>
floatButtonSize: 0.9,
floatButtonX: 6,
floatButtonY: 4
}}
>
export default App;
`
#### Using with next js/ Gatsby js or other React Framework for application routing
`js`
import Link from 'next/link'
.
.
Home
.
.
#### Props
Direct props use ul tag with li or else animations wont be applied
| Prop | Type | Default | Description |
| ------------------- | ---------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- |
| children | ReactNode (ul > li) | optional | Navbar items |85
| className | string | optional | Base class |
| styles | styles object | optional | Base styles |
| iconHeight, iconWidth, iconColor | string | optional | Icon style |
| floatButtonX | number | | Ghost button X position from right |2
| floatButtonY | number | | Ghost button Y position from top |[color 1, color 2]
| listHoverColor | [string, string] | | Hover animation color |leftReveal backgroundCircle
| fontColor, fontSize, fontHoverColor | optional | string | common text styling |
| zIndex | number | optional | z-Index (1000) |
| leftReveal, rightReveal, backgroundBox, backgroundCircle | string | | annimation types |
#### STYLES
If you want custom styles pass your CSS styling(Javascript Object) in Styles props using specific key mentioned below to apply styling correctly.
Take a look at the live demo for custom styling!
| Property | Type | Default | Description |
| ------------------- | ---------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- |
| navigation | React CSS Properties | optional | Base styling |
| navigationButton | React CSS Properties | optional | Ghost button styling |
| navigationIcon | React CSS Properties | optional | Ghost icon styling |
| navigationBackground | React CSS Properties | optional | Panel background styling |
#### Preview
Small screen

Large screen

`javascript
import React from "react";
import { ResponsiveNavbar } from "react-hamburger-menus";
import "react-hamburger-menus/dist/style.css";
export const Default = () => (
Logo
}
);
`
#### Props
Direct props use ul tag with li or else animations wont be applied
| Prop | Type | Default | Description |
| ------------------- | ---------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- |
| children | ReactNode (ul > li) | optional | Navbar items |
| className | string | optional | Base class |
| styles | styles object | optional | Base styles |
| logo | ReactNode | optional | Navbar logo |
| iconColor, iconWidth, iconHeight | string | optional | Icon styling (toggle) |
| zIndex | number | optional | z-Index (1000) |
| animationDelay | number | string | optional | animation delay |
| toggleNavigationBarSmallValue | boolean | optional | manual toggle value |
| toggleNavigationBarSmallFunction | VoidFunction | optional | manual toggle function |
#### STYLES
If you want custom styles pass your CSS styling(Javascript Object) in Styles props using specific key mentioned below to apply styling correctly.
Take a look at the live demo for custom styling!
| Property | Type | Default | Description |
| ------------------- | ---------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- |
| navigation | React CSS Properties | optional | Base styling |
| navigationBarSmall | React CSS Properties | optional | Navbar small screen styling |
| navigationButtonSmall | React CSS Properties | optional | Navbar button small screen styling (toggle) |
| navigationCardSmall | React CSS Properties | optional | Navbar card small screen styling (toggle) |
| navigationBarLarge | React CSS Properties | optional | Navbar card large screen styling (toggle) |
`javascript
import React from "react";
import { GhostButton } from "react-hamburger-menus";
import "react-hamburger-menus/dist/style.css";
const App = () => {
return (
<>
floatButtonX: 85,
floatButtonY: 7
}}
>
export default App;
`
#### Using icon or html (as icon)
` Usersjs`
.
}
/>
.
.
#### Props
| Prop | Type | Default | Description |
| ------------------- | ---------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- |
| children | ReactNode (ul > li) | optional | Navbar items |85
| className | string | optional | Base class |
| styles | styles object | optional | Base styles |
| icon | ReactNode | optional | custom icon |
| floatButtonSize | number | optional | Ghost button size (just number) |
| floatButtonX | number | | Ghost button X position from right |2
| floatButtonY | number | | Ghost button Y position from top |aqua
| fontColor, fontSize | optional | string | common text styling |
| iconHeight, iconWidth, iconColor | string | optional | Icon style |
| listHoverColor | string | | Hover animation color |
| zIndex | number | optional | z-Index (1000) |
#### STYLES
Take a look at the live demo for custom styling!
| Property | Type | Default | Description |
| ------------------- | ---------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- |
| navigation | React CSS Properties | optional | Base styling |
| navigationButton | React CSS Properties | optional | Ghost button styling |
| navigationIcon | React CSS Properties | optional | Ghost icon styling |
| navigationCard | React CSS Properties | optional | Panel pop-up card styling |
It is well tested for chrome, safari and firefox.
This software is open source, licensed under the MIT License.