How to create a navigation bar using React-Bootstrap? Last Updated : 28 Apr, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report 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-BootstrapTo 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 ComponentThis 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 Comment More infoAdvertise with us Next Article How to create Breadcrumb Navigation Using React ? N nikitamehrotra99 Follow Improve Article Tags : Web Technologies ReactJS Geeks Premier League React-Bootstrap Geeks Premier League 2023 +1 More Similar Reads How to create Breadcrumb Navigation Using React ? Breadcrumbs are useful in navigation and provide users with links representing their path through a website or application. In this tutorial, we'll create a simple e-commerce website with product listings and detail pages, incorporating breadcrumbs for a better user experience.Output Preview: Let us 6 min read How to Customize React-Bootstrap Spacing in Navigation Bar ? In this article, we are going to implement React Bootstrap Spacing in the Navigation Bar. In React-Bootstrap, there are different types of classes like 'mx-2' , 'my-4' , and more that are used to manage the space between elements in horizontal and vertical order. So to customize this element's space 4 min read How to create a menu using navbar-inverse in Bootstrap ? In this article, we will learn how to create a menu using the navbar-inverse in Bootstrap & will also understand its implementation through the example. The menu bar is a very important part while making a navigation bar for the website. We can create a menu bar along with inverse the color of t 5 min read How to Add Icon in NavBar using React-Bootstrap ? This article will show you how to add an icon in the navigation bar using React-Bootstrap. We will use React-Bootstrap because it makes it easy to use reusable components without implementing them. PrerequisitesReactJSJSXReact BootstrapCreating React App and Installing ModuleStep 1: Create a React a 2 min read How to create a multi level Dropdown NavBar in React-bootstrap using map? In this article, we are going to implement a drop-down-based navigation bar using React-Bootstrap. We will map the navigation links from an array to a navigation bar with suitable React-Bootstrap classes and components.Prerequisite:React JSHTML CSSJavaScriptJSXSteps to create React Application and i 4 min read How to Create a Navigation Bar with Material-UI ? The Navigation Bar Material UI component provides an efficient way to navigate through web application pages. React utilizes material UI NavBar for responsive and flexible navigation that is easy to implement and also provides animated transitions. ApproachTo create responsive top Navigation Bar Mat 3 min read Like