1.2.2 • Published 5 years ago

react_navbar_responsive v1.2.2

Weekly downloads
6
License
MIT
Repository
github
Last release
5 years ago

Responsive Navbar

  • For React
  • Responsive Navbar component

https://www.npmjs.com/package/react_navbar_responsive

Install

npm install react_navbar_responsive --save

Usage

NOTE: The Navbar component must be a child of Router if you set isRoute=true in any of the links

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import "./App.css";
import Navbar from "./components/Navbar";

function App() {
  return (
    <div className="App">
      {/* NOTE: The Navbar component must be a child of Router if you set isRoute=true in any of the links */}
      <Router>
        <Navbar
          links={[
            {
              to: "/",
              text: "Home"
            },
            {
              to: "/about",
              text: "About",
              isRoute: true
            },
            {
              html: (
                <li>
                  <a href="/contact">Contact</a>
                </li>
              )
            },
            {
              to: "/signin",
              text: "Sign In"
            }
          ]}
        />
        <Route path="/about" exact />
      </Router>
    </div>
  );
}

export default App;

Wide Screen (Desktop) Preview

Alt text

Mobile Preview

Alt text

Project Demo

https://github.com/elishaking/react_navbar_responsive_demo