NavBar Generator

navigation-bar-component-for-react is a simple and customizable component to quickly create a navigation bar for your React UI.

Getting started

1. Install the component

npm install navigation-bar-component-for-react

2. Import the component

import NavBar from 'navigation-bar-component-for-react';
import 'navigation-bar-component-for-react/dist/index.css';

How to configure

Configuring your menu and routes

** optionsArray is an array of objects to help you set up the parent menu, submenus, and their paths.

Here is an example:

const optionsArray = [
  {
    "id": 1,
    "text": "Home",
    "children": [
      { "id": 1.1,
        "text": "About",
        "path":"/about"
      }, 
      { "id": 1.2,
        "text": "Mission",
        "path":"/mission"
      }
    ],
    "path": "/home"
  }

** You will need to pass in the optionsArray and optional settings to NavBar in your main App component:

return (
    <div>
        <BrowserRouter>
          <NavBar optionsArray={optionsArray}  option = "horizontal"  orientation = "ltr" theme="blue" />
        </BrowserRouter>
    </div>

  )

** Please make sure to pass in the relevant paths and components for each parent menu and submenus:

return (
    <div>
        <BrowserRouter>
          <NavBar optionsArray={optionsArray}  option = "horizontal"  orientation = "ltr" theme="blue" />
          <Switch>
            <Route exact path="/home" component={ Home } />
            <Route exact path="/about" component={ About } />
            <Route exact path="/mission" component={ Mission } />
          </Switch>
        </BrowserRouter>
    </div>
  )

Style configuration

Value	Type	Required	Default	Options
option	String	Optional	horizontal	vertical
orientation	String	Optional	ltr	rtl
theme	String	Optional	none	any HTML color code

** ltr orientation is left-to-right; rtl orientation is right-to-left

Author

• Rashmi Menon Vellekkat - GitHub - LinkedIn

Contributors

• Katarzyna Kolny - GitHub - LinkedIn
• Mo Wong - GitHub - LinkedIn
• Hamed Sedighi - GitHub - LinkedIn