Navbar in reactJS

Hey devs, I have started a new project today and I was doing the navbar and I noticed I had never wrote an article about the navbar in reactJS, so I thought to write one. In this article I will create a navbar in reactJS how I usual do it, by using reactJS and bootstrap. Let’s start!

First of all, since I will use bootstrap I need to download it in the project, let’s start by doing that and then we import it in our App.js file. If you don’t know hot to do that, you can follow my tutorial on how to get started with bootstrap in reactJS.

We are also going to use another library. Let’s install it and then import it in our project:

npm i react-bootstrap

import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'

I imported just what we are going to need to code our nav bar. In the next code I created a function and inside of it there is the navbar container. I added a few things in the className. I want to make the nav is responsive, so when the website is displayed in a mobile, the view is different. The menu won’t be displayed, but instead a toggle will be displayed and when the user clicks on it the menu will be show. I added the toggle in the next code snippet

const CustomNavBar = () => {
  return (
    <Navbar collapseOnSelect expand="lg" className="navbar navbar- 
    expand-sm navbar-light fixed-top">
     <Navbar.Toggle aria-controls="navbarSupportedContent" >
       <span className="navbar-toggler-icon"></span>
      </Navbar.Toggle>
    </Navbar>
)}

We now have a basic navbar, but we still need to add a few things. Let’s add the links on the menu:

<Navbar.Collapse id="responsive-navbar-nav ">
    <Nav className="ml-auto">
       <Nav.Link className="nav-item active">
          <div className="nav-link" >Page one</div >
        </Nav.Link>
        <Nav.Link className="nav-item active">
           < div className="nav-link" >Page 2</div >
        </Nav.Link>
        <Nav.Link className="nav-item active">
            < div className="nav-link" >Blog</div >
         </Nav.Link>
      </Nav>
</Navbar.Collapse>

The above code has to be added after the Toggle we used in the first code example. That’s all for this article.

Check other articles