How to create a navigation bar using React-Bootstrap?

React-Bootstrap is a front-end framework that was designed with React in mind. The NavBar Component is a navigation header that is responsive and powerful. It supports navigation, branding, and many other related features. In this article, we are going to implement a navigation bar using React Bootstrap.

Creating Navigation bar using React-Bootstrap

To Create a Navigation Bar using React-Bootstrap we will be utilizing the Navbar component from react-bootstrap. We can also implement a dropdown menu using the Dropdown Component provided by React Bootstrap. Both the examples are given below.

React-Bootstrap Navigation Bar Examples:

As mentioned above we are creating a simple Navigation and Navigation bar with dropdown in the below examples.

Example 1: Creating Navigation Bar using React-Bootstrap Navbar Component

This example implements a navigation bar using react-bootstrap

Javascript

// Filename App.js
import React from "react";
import Navbar from "react-bootstrap/Navbar";

export default function App() {
    return (
        <div>
            <Navbar className="p-3"
                    style={{ background:"lightgray"}}>
                <Navbar.Brand href="#home"
                              style={{color: "green"}}>
                    GeeksforGeeks
                </Navbar.Brand>
                <Navbar.Brand href="#home"
                              style={{color: "green"}}>
                    C++
                </Navbar.Brand>
                <Navbar.Brand href="#home"
                              style={{color: "green"}}>
                    GoLang
                </Navbar.Brand>
            </Navbar>
            <br />
        </div>
        )}

Output :

Example 2: Created Navigation Bar using React-Bootstrap Dropdown Component:

This example implements navigation bar using react-bootstrap with dropdown menu.

Javascript

// Filename - App.js

import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown";

export default function App() {
    return (
        <div>
            <Navbar expand="lg"
                    bg="warning">
                <Container>
                    <Navbar.Brand href="#home">
                        GeeksforGeeks
                    </Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="me-auto">
                            <Nav.Link href="#home">Java</Nav.Link>
                            <Nav.Link href="#c++">C++</Nav.Link>
                            <Nav.Link href="#android">Android</Nav.Link>
                            <Nav.Link href="#spring">Springboot</Nav.Link>
                            <Nav.Link href="#python">Python</Nav.Link>
                            <NavDropdown title="Web Technology"
                                         id="collasible-nav-dropdown">
                                <NavDropdown.Item href="#web/3.1"> React </NavDropdown.Item>
                                <NavDropdown.Item href="#web/3.2"> Angular </NavDropdown.Item>
                                <NavDropdown.Item href="#web/3.3"> HTML </NavDropdown.Item>
                                <NavDropdown.Item href="#web/3.3"> CSS </NavDropdown.Item>
                                <NavDropdown.Item href="#web/3.3"> Javascript </NavDropdown.Item>
                            </NavDropdown>
                        </Nav>
                    </Navbar.Collapse>
                </Container>
            </Navbar>
        </div>
    );
}

Output