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
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 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 className="shadow"> <div className="mx-auto max-w-7xl flex justify-between"> <div className="flex items-center gap-4"> <NavLink to="/"> <img className="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} className={({ 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 className="flex items-center"> <i className="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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import { Outlet } from "react-router-dom"; import Header from "./Header"; import Footer from "./Footer"; function Layout() { return ( <> <Header /> <Outlet /> <Footer /> </> ); } export default Layout; |
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
