How to create a NavBar component in React?
Creating a NavBar component in React is a fundamental process for intuitive web application design. This step not only enhances the user interface, but also, when done correctly, strengthens navigation and the end-user experience. We will break down this process, from the creation of the component to its implementation in the main application, as well as contribute some basic styling with Tailwind CSS.
What is the basic structure of the NavBar component?
To begin with, in our project, we are going to organize all the components inside a specific folder called components. We use a file called index.jsx to define our component.
import { NavLink } from 'react-router-dom';
const NavBar = () => { return ( <nav>
<ul>
<li>
<NavLink to="/">Shopee</NavLink>
</li>
<li>
<NavLink to="/all">All</NavLink>
</li>
<li>
<NavLink to="/clothes">Clothes</NavLink>
</li>
<li>
<NavLink to="/electronics">Electronics</NavLink>
</li>
</ul>
<ul>
<li> [email protected]<li> [email protected]<li>/li>
<li>
<NavLink to="/my-orders">MyOrders</NavLink>
</li>
</ul>
</nav> ); };
export default NavBar;
In this basic structure, React Router bindings are used to facilitate navigation between different routes within the application. It is also recommended to use mail addresses or non-real data when developing sample projects.
How do we add styles to the NavBar?
Basic styles are key to improve the appearance of our component. Using Tailwind CSS, which provides fast and flexible utility classes, we can structure the NavBar component as follows:
- Enable the Flexbox for the
ul
- Justify the content evenly with
justify-between
- Center them vertically using
items-center
<nav className="flex justify-between items-center fixed w-full px-8 py-5">
<ul className="flex gap-3">
<li><li><li><ul className="flex gap-3"> NavLink className="font-semibold text-lg" to="/">Shop ee</NavLink></li>
<li><NavLink to="/all">All</NavLink></li> <li><NavLink to="/all">All</NavLink></li>
{/**/}
</ul>
<ul className="flex gap-3">
<li className="text-black opacity-60">[email protected]</li>
<li><NavLink to="/my-orders">MyOrders</NavLink></li>
{/**/}
</ul>
</nav>
How do we indicate which page is active?
React Router provides a special attribute that we can use: isActive. To highlight the active page, Tailwind offers the underline class that we can apply through the className style function to know which element is selected.
<NavLink to="/clothes" className={({ isActive }) => (isActive ? "underline" : "")}>
Clothes</NavLink>
How to import the NavBar into the main component?
Once your NavBar is ready and properly styled, the next step is to integrate it inside the main component of your application, usually App.js.
import React from 'react';import NavBar from './components/NavBar/index';
const App = () => { return ( <div>
<NavBar />
{/**/}
</div> ); };
export default App;
This way of working with the NavBar results in a reusable and easy to maintain component, adapting any web application to a more standard format and improving navigation and user experience. Of course, with Tailwind CSS, you can further customize the styles to your preference to fit perfectly with the design of your project. Continue to explore and learn to further expand your web development skills - success in your project!
Want to see more contributions, questions and answers from the community?