Creating a Navbar in React

This article will show you how you can build a navigation bar (“navbar”) in React, while covering everything from design considerations to implementation and accessibility best practices.

One of the essential parts of any web application is the navigation bar, as it allows users to navigate through different pages and sections of the website.

So it’s important that you build a navigation bar that has the required links, along with the right accessibility measures to ensure that your users are able to find their way within your application.

Key Takeaways

• A navbar is a crucial element of any website, as it provides users with a means to navigate through different pages and sections.
• React allows for the creation of reusable and modular components, making it an excellent choice for building complex UIs like navbars.
• Accessibility should be a top priority when creating a navbar, ensuring that all users, including those with disabilities, can effectively navigate your website.

What is a Navbar?

A navbar is a user interface element that typically appears at the top or side of a web page.

It serves as a navigation aid, providing links or buttons that allow users to access different sections or pages within the website.

It’s essential for creating a seamless and intuitive user experience, as it helps users understand the structure and hierarchy of the website, and enables them to move effortlessly between different parts of the application.

Here are a few examples of well-designed navbars:

Airbnb. Airbnb’s navbar features a clean and minimalist design, with clear links to various sections of the website, such as “Places to stay”, “Experiences”, and “Online Experiences”.

Dropbox. The Dropbox navbar is simple yet effective, with a prominent “Products” dropdown menu that allows users to explore different offerings.

Building a Navbar in React

Now that we understand the importance of navbars, let’s dive into the process of building one using React.

For this example, we’ll create a navbar for an ecommerce website called “ShopNow”.

Step 1: Designing the navbar

Before we start coding, it’s essential to have a clear design in mind for our navbar.

For our ShopNow website, we’ll aim for a simple yet modern design with the following elements:

• a logo on the left side
• links to different sections of the website (such as “Products”, “About Us” and “Contact”)
• a shopping cart icon with a badge displaying the number of items in the cart
• a user icon for account-related actions (such as “Sign In” and “My Account”)

Here’s a mockup of how our navbar might look.

Step 2: Setting up the React project

Before we start building our navbar, we’ll need to set up a new React project. You can create a new React project using Create React App by running the following command in your terminal:

npx create-react-app shopnow

Once the project is set up, navigate to the project directory and start the development server:

cd shopnow
npm start

Step 3: Creating the navbar component

With SPA frameworks like React, it’s important that you design and think in reusable, independent components. So it’s crucial to build components that you can reuse throughout your application.

One application of a reusable component is a navigation bar. You can create a reusable navbar component that you can reuse within your application.

Let’s create a new file called Navbar.js in the src directory and add the following code:

import React from 'react';
import './Navbar.css';

const Navbar = () => {
  return (

<nav className="navbar">
  {/* Navbar content will go here */}
</nav>
);
};

export default Navbar;

We’ve created a functional component called Navbar that returns a <nav> element with a class name of navbar. We’ll also create a new file called Navbar.css in the same directory to style our navbar.

Step 4: Adding the navbar structure

Now let’s add the structure of our navbar inside the Navbar component:

import React from 'react';
import './Navbar.css';

const Navbar = () => {
  return (

<nav className="navbar">
  <div className="navbar-left">
    <a href="/" className="logo">
      ShopNow
    </a>
  </div>
  <div className="navbar-center">
    <ul className="nav-links">
      <li>
        <a href="/products">Products</a>
      </li>
      <li>
        <a href="/about">About Us</a>
      </li>
      <li>
        <a href="/contact">Contact</a>
      </li>
    </ul>
  </div>
  <div className="navbar-right">
    <a href="/cart" className="cart-icon">
      <i className="fas fa-shopping-cart"></i>
      <span className="cart-count">0</span>
    </a>
    <a href="/account" className="user-icon">
      <i className="fas fa-user"></i>
    </a>
  </div>
</nav>
);
};

export default Navbar;

In this code, we’ve divided the navbar into three sections:

1. navbar-left. This contains the logo, which is a link to the home page.
2. navbar-center. This contains an unordered list (<ul>) of navigation links.
3. navbar-right. This contains a shopping cart icon with a badge displaying the number of items in the cart and a user icon for account-related actions.

We’ve also used Font Awesome icons for the cart and user icons, which you’ll need to include in your project by following the instructions on their site.

Step 5: Styling the navbar

Now that we have the structure in place, let’s add some styles to make our navbar look more appealing. Open the Navbar.css file and add the following styles:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

.navbar-left .logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

.navbar-center .nav-links {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar-center .nav-links li {
  margin-right: 1rem;
}

.navbar-center .nav-links a {
  color: #fff;
  text-decoration: none;
}

.navbar-right {
  display: flex;
  align-items: center;
}

.navbar-right .cart-icon,
.navbar-right .user-icon {
  color: #fff;
  text-decoration: none;
  margin-left: 1rem;
  position: relative;
}

.navbar-right .cart-count {
  background-color: #f44336;
  color: #fff;
  border-radius: 50%;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
}

Step 6: Importing and rendering the navbar

Finally, we need to import the Navbar component and render it in our App.js file:

import React from 'react';
import Navbar from './Navbar';

function App() {
  return (
<div>
  <Navbar /v>
  {/* Rest of your app content goes here */}
</div>
);
}

export default App;

Now, when you run your React app, you should see the navbar at the top of the page, as shown in this Pen.

Click the 0.5x button in the Pen above to see the desktop layout of the navbar.

Step 7: Best Practices: Enhancing Accessibility

Building an accessible navbar is crucial for ensuring that all users can effectively navigate your website.

Here are some best practices to follow.

• Use semantic HTML. We’ve already used semantic HTML elements in our navbar code. The main navigation section is wrapped in a <nav> element, the list of links is contained within an unordered list (<ul>) with each link as a list item (<li>), and the links themselves are represented by <a> elements.

• Add ARIA roles and attributes. We can add the role="navigation" attribute to the <nav> element to indicate that it is a navigation section:

  <nav className="navbar" role="navigation">
       {/* ... */}
  </nav>

• Ensure keyboard accessibility. >React provides built-in support for keyboard accessibility. By default, all interactive elements (such as links and buttons) can be focused using the tab key and activated using the Enter or Space keys. However, we should test this functionality to ensure it works as expected in our navbar.

• Provide clear focus styles. To provide clear focus styles, we can add CSS rules for the :focus state of our links and icons. Here’s an example of how we can style the focused links in our navbar:

  .navbar-center .nav-links a:hover {
    color: red;
  }
  

  You can adjust the outline and outline-offset properties to achieve the desired focus style.

• Use descriptive link text. In our navbar code, we’ve already used descriptive link text for the navigation links (“Products”, “About Us”, “Contact”). However, we should ensure that the link text for the cart and user icons is also descriptive. One way to achieve this is by adding visually hidden text using the aria-label attribute:

    <a href="/cart" className="cart-icon" aria-label="Shopping Cart">
       <i className="fas fa-shopping-cart"></i>
       <span className="cart-count">0</span>
    </a>
    <a href="/account" className="user-icon" aria-label="User Account">
       <i className="fas fa-user"></i>
    </a>

• Make the layout responsive. To make our navbar responsive, we can use CSS media queries to adjust the layout and styles based on the screen size. For example, we could hide the navigation links on smaller screens and replace them with a hamburger menu:

  @media (max-width: 768px) {
       .navbar-center .nav-links {
         display: none;
       }
  
       .navbar-right {
         display: flex;
         align-items: center;
       }
  
       .navbar-right .hamburger-menu {
         display: block;
         color: #fff;
         font-size: 1.5rem;
         cursor: pointer;
       }
     }

  In the JavaScript code, we’d need to handle the toggling of the navigation links when the hamburger menu is clicked.

By implementing these accessibility best practices, we can ensure that our navbar is usable and inclusive for all users, including those with disabilities. Remember to test your application with various screen readers, keyboard navigation, and other assistive technologies to ensure it meets accessibility standards.

Wrapping Up

And that’s it! You now have yourself a navigation bar that you can reuse across your application that ensures your users are able to find their way within your app.

To check out the full code, explore the CodePen demo.

Frequently Asked Questions (FAQs)