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.
thanks, it helped a lot