Designing a Header Component for a Shopping Cart React Application - Part 6
Welcome back to the sixth part of our series on building a Shopping Cart React Application! In this segment, we're going to delve into the creation of a sleek and functional header component. A well-designed header is crucial for providing easy navigation and enhancing the overall user experience.
Demo Application
Output - Designing a Header Component for a Shopping Cart React Application - Clue Mediator
Designing a Header Component
1. Shopping Cart Logo
The Shopping Cart logo is linked to the home page for a consistent user experience.
2. Navigation Links
The component includes a set of navigation links (Home, Products, About, Contact) styled using Tailwind CSS classes.
3. Shopping Cart Icon
The header contains a shopping cart icon, and within it, there's a badge displaying the count of items in the cart (currently set to "1" for illustration).
4. Header Component Code
/components/Header.jsx
import { NavLink } from "react-router-dom";
function Header() {
const navigations = [
{ name: "Home", href: "/" },
{ name: "Products", href: "/products" },
{ name: "About", href: "/about" },
{ name: "Contact", href: "/contact" },
];
return (
<div class="shadow">
<div class="mx-auto max-w-7xl flex justify-between">
<div class="flex items-center gap-4">
<navlink to="/">
<img class="h-8 w-8" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Shopping Cart">
</navlink>
{navigations.map((nav, index) => {
return (
<navlink key={index} to={nav.href} class="{({" isactive="" })="">
`text-gray-500 border-b hover:border-b-indigo-500 hover:text-indigo-500 px-4 py-4 h-full text-sm font-medium${
isActive ? " border-b-indigo-500 text-indigo-500" : ""
}`
}
>
{nav.name}
</navlink>
);
})}
</div>
<div class="flex items-center">
<i class="bi bi-cart relative">
<span class="absolute -right-2 -top-1 rounded-full bg-red-600 w-4 h-4 p-0 m-0 text-white font-mono text-xs leading-tight text-center">
1
</span>
</i>
</div>
</div>
</div>
);
}
export default Header;
Let's also remove the horizontal line from the layout component.
/components/Layout.jsx
import { Outlet } from "react-router-dom";
import Header from "./Header";
import Footer from "./Footer";
function Layout() {
return (
<>
<header>
<outlet>
<footer>
);
}
export default Layout;</footer></outlet></header>
Conclusion
With this header component, your Shopping Cart React Application gains a visually appealing and functional navigation system. Feel free to customize it further to match your application's design.
Happy coding, and may your shopping cart always be filled with success!
“Design is not just what it looks like and feels like. Design is how it works.” - Steve Jobs