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
// 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.
// 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