https://github.com/eracodex/react-navbar

https://github.com/eracodex/react-navbar

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/eracodex/react-navbar
• Owner: eracodex
• License: mit
• Created: 2020-09-19T07:16:00.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-03-23T10:00:57.000Z (about 4 years ago)
• Last Synced: 2025-03-28T14:40:09.143Z (about 2 months ago)
• Language: JavaScript
• Size: 13.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-navbar

We used bootstrap4 for this navbar (version 4.5.2)

Create a file in the `components` folder and name it

`navbar.component.js`

Then use the following code in the `navbar.component.js` file and make necessary modification like brand-name, link-names, path 

```javascript

import React from 'react';

import {Link} from "react-router-dom";

import 'bootstrap/dist/css/bootstrap.min.css';

import 'bootstrap/dist/js/bootstrap.bundle';

import 'jquery/dist/jquery';

export default function Navbar(){

    return (

        

            


                


                    tradecoder

                

                    

                        

                    

                    


                        


                            
Link One

                            
Link Two

                            
Link Three

                        

                    
       

            

        

    );

}

```


Then import the Navbar component in the relevant file.

Sample import of Navbar component to `App.js` file

```javascript

import React from 'react';

import {BrowserRouter as Router, Route} from "react-router-dom";

import Counter from './components/counter.component';

import Navbar from './components/navbar.component.js';

// import AotherComonent from './components/another-component.component.js';

// import ThreeComponent from './components/three-component.comonent.js';

function App() { 

  return (    

    

      

   //   

   //   

    

  );

}

export default App;

```