react-responsive-animate-navbar (Example)

Buy Me Acoffee

just a simple, flexible & completely customisable responsive navigation bar component.

Desktop Demo:

Responsive Demo:

Install

npm install --save react-responsive-animate-navbar

Usage

import React from "react";
import ReactNavbar from "react-responsive-animate-navbar";
import {
  HomeComponent,
  ArticlesComponent,
  AboutComponent,
  ContactComponent,
} from "./components";

class Example extends Component {
  render() {
    return (
      <ReactNavbar
        color="rgb(25, 25, 25)"
        logo="https://svgshare.com/i/KHh.svg"
        menu={[
          { name: "HOME", to: "/", component: HomeComponent },
          { name: "ARTICLES", to: "/articles", component: ArticlesComponent },
          { name: "ABOUT ME", to: "/about", component: AboutComponent },
          { name: "CONTACT", to: "/contact", component: ContactComponent },
        ]}
        social={[
          {
            name: "Linkedin",
            url: "https://www.linkedin.com/in/nazeh-taha/",
            icon: ["fab", "linkedin-in"],
          },
          {
            name: "Facebook",
            url: "https://www.facebook.com/nazeh200/",
            icon: ["fab", "facebook-f"],
          },
          {
            name: "Instagram",
            url: "https://www.instagram.com/nazeh_taha/",
            icon: ["fab", "instagram"],
          },
          {
            name: "Twitter",
            url: "http://nazehtaha.herokuapp.com/",
            icon: ["fab", "twitter"],
          },
        ]}
      />
    );
  }
}

Props

Property	Type	Default	Description
color	string	"rgb(25, 25, 25)"	The Background of the navbar
logo	string	"https://svgshare.com/i/KHh.svg"	the SVG logo url.
menu	array	like the example	the route url.
social	array	like the example	the icons for social links.

License

MIT © Nazeh-Taha