How to add a Navbar using React-bootstrap?

In this article, we will add a navbar using React-bootstrap.  

Let’s start!

Create React App

The best way to start creating a new single-page React application is with Create React App which gives a comfortable learning environment.

To start a project, use the command below:

npx create-react-app my-app 
cd my-app 
npm start

The code structure looks like this:

Output

Creating a Navbar with react-bootstrap

Bootstrap installation: Run these commands for installing the bootstrap

npm install bootstrap

npm install react-bootstrap [email protected]

Now create a src/components folder in your React application and create a file in the components folder.

Inside the src/components directory, create a navbar.js file.

import React from "react";

const navbar = () => {
    return ()
}
export default navbar

Paste the bootstrap navbar in the navbar.js file:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';

function navbar() {
  return (
    <Navbar bg="light" expand="lg">
      <Container>
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">About</Nav.Link>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">
                Separated link
              </NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default navbar;

Now, go to the app.js file and make changes to get the navbar on the output screen.

import Navbar from "./components/navbar";

function App() {
  return (
    <Navbar/>
  );
}

export default App;

Output

Conclusion

This article will help you in adding a navbar to your react project. Hope you understand the concepts of react-bootstrap Navbar. If you want to learn about react-router, Check my article ”Implement Routing for your React Apps with React Router”. Thank you for reading my article.