Introduction
Creating a user-friendly and visually appealing navigation bar is crucial for any web application. In this article, we'll walk through the process of building a responsive navigation bar using React and Bootstrap. The goal is to implement a navbar with multiple sections, including dropdown menus and icons, ensuring that it's adaptable to various screen sizes.
Prerequisites
Before we dive into the code, ensure you have the following installed.
- Node.js and npm
- React
- React Bootstrap
- React Router
To get started, run the following commands to set up a new React project and install the necessary dependencies.
npx create-react-app my-app
cd my-app
npm install react-bootstrap bootstrap react-router-dom
Additionally, import Bootstrap's CSS in your index.js or App.js file.
import 'bootstrap/dist/css/bootstrap.min.css';
Step-by-Step Guide to Creating the Navbar
Here's the complete code for our navigation bar component, NavScrollExample.js.
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Link } from "react-router-dom";
function NavScrollExample() {
return (
<div>
<Navbar expand="lg" className="bg-body-tertiary">
<Container fluid>
<Navbar.Brand href="#">
We are available 24/7, Need help?
<span className='mobnum'>+099949343</span>
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav
className="me-auto my-2 my-lg-0"
style={{ maxHeight: '100px' }}
navbarScroll
>
<Nav.Item>
<Link to="/" className="nav-link">
Aboutus<span className="sptg1">|</span>
</Link>
</Nav.Item>
<Nav.Item>
<Link to="/Link" className="nav-link">
Contactus<span className="sptg1">|</span>
</Link>
</Nav.Item>
<Nav.Item>
<Link to="/Link" className="nav-link">
Myaccount<span className="sptg1">|</span>
</Link>
</Nav.Item>
<Nav.Item>
<Link to="/Link" className="nav-link">
<span>
<svg
stroke="currentColor"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</span>
Login
</Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<Navbar expand="lg" className="bg-body-tertiary">
<Container fluid id="bacclr">
<Navbar.Brand href="#" className='header'>
<h2 className='clrhdr'>
Kacha<span><h4>Bazar</h4></span>
</h2>
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav
className="me-auto my-2 my-lg-0"
style={{ maxHeight: '100px' }}
navbarScroll
>
<Nav.Item>
<Link to="/" className="nav-link">
<span className='sbgimg'>
<svg
stroke="currentColor"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="w-6 h-6 drop-shadow-xl"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
</svg>
</span>
</Link>
</Nav.Item>
<Nav.Item>
<Link to="/Link" className="nav-link">
<span className='sbgimg'>
<svg
stroke="currentColor"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="w-6 h-6 drop-shadow-xl"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</span>
</Link>
</Nav.Item>
<Nav.Item>
<Link to="/About" className="nav-link">
<span className='sbgimg'>
<svg
className='skyt'
stroke="currentColor"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="w-6 h-6 drop-shadow-xl"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</span>
</Link>
</Nav.Item>
</Nav>
<Form className="d-flex">
<Form.Control
type="search"
className="me-2"
aria-label="Search"
/>
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Container>
</Navbar>
<Navbar expand="lg" className="bg-body-tertiary">
<Container fluid>
<NavDropdown title="Categories" id="navbarScrollingDropdown">
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">
Another action
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">
Something else here
</NavDropdown.Item>
</NavDropdown>
<Nav.Item>
<Link to="/" className="nav-link" id='abt'>Aboutus</Link>
</Nav.Item>
<Nav.Item>
<Link to="/contactus" className="nav-link" id='cnt'>Contactus</Link>
</Nav.Item>
<NavDropdown title="Pages" id="navbarScrollingDropdown">
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">
Another action
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">
Something else here
</NavDropdown.Item>
</NavDropdown>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav
className="me-auto my-2 my-lg-0"
style={{ maxHeight: '100px' }}
navbarScroll
>
<Nav.Item>
<Link to="/" className="nav-link">Aboutus</Link>
</Nav.Item>
<Nav.Item>
<Link to="/Link" className="nav-link">Privacy Policy</Link>
</Nav.Item>
<Nav.Item>
<Link to="/Link" className="nav-link">Tearms and Condition</Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
);
}
export default NavScrollExample;
Explanation
- First Navbar: The first navbar provides a contact number and includes links to "Aboutus", "Contactus", "Myaccount", and a login link with an SVG icon.
- Second Navbar: The second navbar features the brand "Kacha Bazar" and includes links with SVG icons for different functionalities. It also has a search form.
- Third Navbar: The third navbar contains dropdown menus for "Categories" and "Pages", along with links to "Aboutus", "Contactus", "Privacy Policy", and "Terms and Conditions".
Tips for Improvement
- Consistency: Ensure consistency in class names and IDs.
- Icons: Separate SVG icons into their own components for better readability.
- Accessibility: Use