react-animated-navbars

Congrats! You just saved yourself hours of work by using react-animated-navbars library for creating animated navigation panels

Demo

Take a look at the live demo!

Installation

npm

npm i react-animated-navbars

yarn

yarn add react-animated-navbars

Usage

Ghost Navbar

  • Import GhostNavbar component from react-animated-navbars
  • Import styles react-animated-navbars/dist/react-animated-navbars.cjs.development.css

import React from "react";
import GhostNavbar from "react-animated-navbars";
import "react-animated-navbars/dist/react-animated-navbars.cjs.development.css";

const App = ()=>{
  <GhostNavbar>
   <ul>
    <li>ABOUT</li>
    <li>PROJECTS</li>
    <li>ELEMENTS</li>
    <li>CONTACT</li>
   </ul>
  </GhostNavbar>
}

API

Props

Prop Type Default Description
children ReactNode (ul > li) optional Navbar items
className string optional Base class
styles styles object optional Base styles

STYLES

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
floatButtonSize number optional Ghost button size (just number)
floatButtonX string 85% Ghost button X position from right
floatButtonY string 2% Ghost button Y position from top
listHoverColor [string, string] [color 1, color 2] Hover animation color

GitHub

View Github