Are you tired of static, boring navigation bars that fail to engage your website visitors? In today’s fast-paced digital world, user experience is everything. A dynamic navigation bar can be the game-changer your React application needs to stand out from the crowd.
Imagine a sleek, responsive navbar that adapts to user interactions, providing seamless navigation and enhancing overall site usability. Not only does it look impressive, but it also boosts user engagement and potentially increases conversion rates. But how do you create such a powerful component without getting lost in a maze of code?
Fear not! Because in this comprehensive guide, we’ll walk you through the process of Building a Dynamic Navigation Bar with React, Whether you’re a seasoned developer or just starting with React, you’ll find valuable insights to elevate your web development skills. Let’s dive in and transform your website’s navigation experience!
Have a look at the navigation bar !!
Defining navigation items
These are the core elements of your navigation bar that users will interact with to move around your website. Here are some key points to consider when defining your navigation items:
- Essential pages: Include links to the most important pages of your website. Common navigation items often include:
- Home
- About
- Products/Services
- Contact
- Hierarchy: Organize your navigation items in a logical hierarchy. Group related items together and consider using dropdown menus for subcategories.
- Clear labels: Use concise, descriptive labels for each navigation item. Avoid jargon or ambiguous terms that might confuse users.
- Consistency: Ensure that your navigation items are consistent across all pages of your website. This helps users build a mental model of your site structure.
Creating a responsive design
In today’s multi-device world, creating a responsive design for your navigation bar is crucial. A responsive navigation bar adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices. Here are some key strategies for creating a responsive navigation bar:
- Mobile-first approach: Start by designing for mobile devices and then scale up for larger screens. This ensures that your navigation works well on smaller screens and helps prioritize essential items.
- Breakpoints: Define clear breakpoints where your navigation bar’s layout will change. Common breakpoints include:
- Mobile: Up to 768px
- Tablet: 768px to 1024px
- Desktop: 1024px and above
- Hamburger menu: For mobile devices, consider using a hamburger menu icon that expands to reveal navigation items when clicked. This saves space on smaller screens.
Creating a NavBar component
To begin implementing our dynamic navigation bar, we’ll start by creating a NavBar component. This component will serve as the foundation for our navigation structure.
import React, { useState } from "react";
import "./Navbar.css";
import { Link, NavLink } from "react-router-dom";
export const Navbar = () => {
const [menuOpen, setMenuOpen] = useState(false);
return (
<nav>
<Link to="/" className="title">
Website
</Link>
<div className="menu" onClick={() => setMenuOpen(!menuOpen)}>
<span></span>
<span></span>
<span></span>
</div>
<ul className={menuOpen ? "open" : ""}>
<li>
<NavLink to="/about">About</NavLink>
</li>
<li>
<NavLink to="/services">Services</NavLink>
</li>
<li>
<NavLink to="/contact">Contact</NavLink>
</li>
</ul>
</nav>
);
};
Styling with CSS
With our basic structure in place, let’s add some CSS to make our navigation bar look more appealing. Create a new file called NavBar.css in the same directory as your NavBar.jsx file, and add the following styles:
.active{
background-color: #1d4ed8;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #0f172a;
color: white;
position: sticky;
top: 0;
}
nav .title {
font-size: 1.5rem;
margin: 1rem;
font-weight: bold;
text-decoration: none;
color: white;
}
nav ul {
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: white;
padding: 0.5rem;
margin: 0 0.5rem;
border-radius: 0.5rem;
}
nav ul li a:not(.active):hover {
background: color #172551; ;
}
nav .menu {
display: none;
position: absolute;
top: 0.75rem;
right: 0.5rem;
flex-direction: column;
justify-content: space-between;
width: 2.25rem;
height: 2rem;
}
nav .menu span {
height: 0.4rem;
width: 100%;
background-color: #fff;
border-radius: 0.2rem;
}
@media (max-width: 480px) {
nav .menu {
display: flex;
}
nav {
flex-direction: column;
align-items: flex-start;
}
nav ul {
display: none;
flex-direction: column;
width: 100%;
margin-bottom: 0.25rem;
}
nav ul.open {
display: flex;
}
nav ul li {
width: 100%;
text-align: center;
}
nav ul li a {
margin: 0.2rem 0.5rem;
}
}
Adding pages to the website
You can add necessary pages to your website. As React is a Single page Application the pages remain same, we are going to just change the content on the same page.
In this tutorial, I will be taking 4 pages as a example:
- Home page
- About page
- Services page
- Contact page.
So ,we are going to create one folder named “Pages” and add all the pages .js files into that folder ,to make our code more accessible and modular .
Home.js
import React from "react";
export const Home = () => {
return <h1>Home</h1>;
};
About.js
import React from "react";
export const About = () => {
return <h1>About</h1>;
};
Contact.js
import React from "react";
export const Contact = () => {
return <h1>Contact</h1>;
};
Services.js
import React from "react";
export const Services = () => {
return (
<>
<h1>Services</h1>
<div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem sunt
itaque, perferendis necessitatibus corrupti ea magni voluptatibus est
ipsa. Nulla praesentium dolore eos alias incidunt, odio et eaque, sunt
vitae corporis animi, itaque architecto. Sunt minima nostrum fugiat
quibusdam voluptate dolore illo cupiditate quam odio sequi. Consequatur
tempora ullam, ipsam molestias dolor dolores tempore. Molestias, error
porro tenetur delectus numquam animi aut quod consequuntur? Dolor sequi
quisquam ex, eaque explicabo, labore maxime veniam voluptas enim
recusandae architecto est voluptates optio libero officiis consectetur
possimus voluptate ipsam alias velit veritatis reprehenderit
repudiandae. Ullam praesentium inventore minima eius dolorem omnis fugit
facilis.
</div>
<br />
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
libero laboriosam quia totam, ducimus dolorum velit voluptates ipsam ad
labore repellendus! Reprehenderit corporis labore totam est quas natus
non quis? Atque porro obcaecati error hic perspiciatis itaque
reprehenderit ut aperiam, ipsa, repellendus voluptatum, architecto sint
delectus. Dolorem, officia nostrum? Quae similique eveniet, animi
laborum impedit commodi, deleniti cum adipisci atque quidem culpa
incidunt placeat id rem dolorum sit eligendi sapiente ea sed, voluptate
voluptates minima pariatur ipsam delectus. Inventore deserunt
exercitationem repudiandae ducimus nihil, assumenda vel ex optio aut
voluptates nostrum dolor beatae in voluptatem. Adipisci excepturi
nesciunt ab soluta.
</div>
<br />
<div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea aut a,
expedita quaerat, facere iste earum deserunt numquam dignissimos
obcaecati voluptatem repellendus nemo eveniet corporis esse voluptatibus
facilis laboriosam natus quam sapiente ipsum ipsa, repudiandae qui
alias. Ut inventore commodi quae ea excepturi, soluta distinctio
laboriosam cum voluptatem consectetur cupiditate neque eius esse placeat
consequatur assumenda, unde atque nemo modi perferendis? Saepe
molestiae, earum at dicta sit iusto dignissimos vero voluptate voluptas
qui ullam molestias omnis cupiditate dolores sunt incidunt ab nisi eaque
culpa dolorum? Provident eos doloribus soluta maxime obcaecati quam, a,
quod blanditiis dolores odit aliquid quis distinctio.
</div>
<br />
<div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea aut a,
expedita quaerat, facere iste earum deserunt numquam dignissimos
obcaecati voluptatem repellendus nemo eveniet corporis esse voluptatibus
facilis laboriosam natus quam sapiente ipsum ipsa, repudiandae qui
alias. Ut inventore commodi quae ea excepturi, soluta distinctio
laboriosam cum voluptatem consectetur cupiditate neque eius esse placeat
consequatur assumenda, unde atque nemo modi perferendis? Saepe
molestiae, earum at dicta sit iusto dignissimos vero voluptate voluptas
qui ullam molestias omnis cupiditate dolores sunt incidunt ab nisi eaque
culpa dolorum? Provident eos doloribus soluta maxime obcaecati quam, a,
quod blanditiis dolores odit aliquid quis distinctio.
</div>
<br />
<div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea aut a,
expedita quaerat, facere iste earum deserunt numquam dignissimos
obcaecati voluptatem repellendus nemo eveniet corporis esse voluptatibus
facilis laboriosam natus quam sapiente ipsum ipsa, repudiandae qui
alias. Ut inventore commodi quae ea excepturi, soluta distinctio
laboriosam cum voluptatem consectetur cupiditate neque eius esse placeat
consequatur assumenda, unde atque nemo modi perferendis? Saepe
molestiae, earum at dicta sit iusto dignissimos vero voluptate voluptas
qui ullam molestias omnis cupiditate dolores sunt incidunt ab nisi eaque
culpa dolorum? Provident eos doloribus soluta maxime obcaecati quam, a,
quod blanditiis dolores odit aliquid quis distinctio.
</div>
<br />
<div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea aut a,
expedita quaerat, facere iste earum deserunt numquam dignissimos
obcaecati voluptatem repellendus nemo eveniet corporis esse voluptatibus
facilis laboriosam natus quam sapiente ipsum ipsa, repudiandae qui
alias. Ut inventore commodi quae ea excepturi, soluta distinctio
laboriosam cum voluptatem consectetur cupiditate neque eius esse placeat
consequatur assumenda, unde atque nemo modi perferendis? Saepe
molestiae, earum at dicta sit iusto dignissimos vero voluptate voluptas
qui ullam molestias omnis cupiditate dolores sunt incidunt ab nisi eaque
culpa dolorum? Provident eos doloribus soluta maxime obcaecati quam, a,
quod blanditiis dolores odit aliquid quis distinctio.
</div>
<br />
<div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea aut a,
expedita quaerat, facere iste earum deserunt numquam dignissimos
obcaecati voluptatem repellendus nemo eveniet corporis esse voluptatibus
facilis laboriosam natus quam sapiente ipsum ipsa, repudiandae qui
alias. Ut inventore commodi quae ea excepturi, soluta distinctio
laboriosam cum voluptatem consectetur cupiditate neque eius esse placeat
consequatur assumenda, unde atque nemo modi perferendis? Saepe
molestiae, earum at dicta sit iusto dignissimos vero voluptate voluptas
qui ullam molestias omnis cupiditate dolores sunt incidunt ab nisi eaque
culpa dolorum? Provident eos doloribus soluta maxime obcaecati quam, a,
quod blanditiis dolores odit aliquid quis distinctio.
</div>
</>
);
};
You might be wondering why I have added so much text in the service page ??
So, I just wanted to show you that ,when we are going to scroll the page down ,the navigation bar is not going to disappear, it will remain in its position !! So cool … isn’t it??
Adding your NavBar to the App.js
Your App.js file is the main file which will get inject into the root component .
import './App.css';
import { Navbar } from './Components/Navbar';
import { Routes,Route } from 'react-router-dom';
import { Home } from './Components/Pages/Home';
import { About } from './Components/Pages/About';
import { Services } from './Components/Pages/Services';
import { Contact } from './Components/Pages/Contact';
function App(){
return(
<div className="App">
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/services" element={<Services />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
);
}
export default App;