Making a Navbar in React — SitePoint

This text will present you how one can construct a navigation bar (“navbar”) in React, whereas protecting every little thing from design issues to implementation and accessibility finest practices.

One of many important components of any internet utility is the navigation bar, because it permits customers to navigate by way of completely different pages and sections of the web site.

So it’s necessary that you simply construct a navigation bar that has the required hyperlinks, together with the fitting accessibility measures to make sure that your customers are capable of finding their method inside your utility.

Key Takeaways

• A navbar is a vital component of any web site, because it gives customers with a method to navigate by way of completely different pages and sections.
• React permits for the creation of reusable and modular parts, making it a wonderful selection for constructing complicated UIs like navbars.
• Accessibility ought to be a high precedence when making a navbar, making certain that every one customers, together with these with disabilities, can successfully navigate your web site.

What’s a Navbar?

A navbar is a consumer interface component that usually seems on the high or facet of an internet web page.

It serves as a navigation assist, offering hyperlinks or buttons that enable customers to entry completely different sections or pages throughout the web site.

It’s important for making a seamless and intuitive consumer expertise, because it helps customers perceive the construction and hierarchy of the web site, and allows them to maneuver effortlessly between completely different components of the appliance.

Listed here are a number of examples of well-designed navbars:

Airbnb. Airbnb’s navbar encompasses a clear and minimalist design, with clear hyperlinks to varied sections of the web site, akin to “Locations to remain”, “Experiences”, and “On-line Experiences”.

Dropbox. The Dropbox navbar is straightforward but efficient, with a outstanding “Merchandise” dropdown menu that permits customers to discover completely different choices.

Constructing a Navbar in React

Now that we perceive the significance of navbars, let’s dive into the method of constructing one utilizing React.

For this instance, we’ll create a navbar for an ecommerce web site referred to as “ShopNow”.

Step 1: Designing the navbar

Earlier than we begin coding, it’s important to have a transparent design in thoughts for our navbar.

For our ShopNow web site, we’ll goal for a easy but trendy design with the next components:

• a emblem on the left facet
• hyperlinks to completely different sections of the web site (akin to “Merchandise”, “About Us” and “Contact”)
• a buying cart icon with a badge displaying the variety of gadgets within the cart
• a consumer icon for account-related actions (akin to “Signal In” and “My Account”)

Right here’s a mockup of how our navbar would possibly look.

Step 2: Establishing the React venture

Earlier than we begin constructing our navbar, we’ll must arrange a brand new React venture. You possibly can create a brand new React venture utilizing Create React App by operating the next command in your terminal:

npx create-react-app shopnow

As soon as the venture is about up, navigate to the venture listing and begin the event server:

cd shopnow
npm begin

Step 3: Creating the navbar part

With SPA frameworks like React, it’s necessary that you simply design and assume in reusable, impartial parts. So it’s essential to construct parts that you could reuse all through your utility.

One utility of a reusable part is a navigation bar. You possibly can create a reusable navbar part that you could reuse inside your utility.

Let’s create a brand new file referred to as Navbar.js within the src listing and add the next code:

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

const Navbar = () => {
  return (

<nav className="navbar">
  {}
</nav>
);
};

export default Navbar;

We’ve created a purposeful part referred to as Navbar that returns a <nav> component with a category identify of navbar. We’ll additionally create a brand new file referred to as Navbar.css in the identical listing to fashion our navbar.

Step 4: Including the navbar construction

Now let’s add the construction of our navbar contained in the Navbar part:

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

const Navbar = () => {
  return (

<nav className="navbar">
  <div className="navbar-left">
    <a href="/" className="emblem">
      ShopNow
    </a>
  </div>
  <div className="navbar-center">
    <ul className="nav-links">
      <li>
        <a href="/merchandise">Merchandise</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;

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

1. navbar-left. This accommodates the brand, which is a hyperlink to the house web page.
2. navbar-center. This accommodates an unordered record (<ul>) of navigation hyperlinks.
3. navbar-right. This accommodates a buying cart icon with a badge displaying the variety of gadgets within the cart and a consumer icon for account-related actions.

We’ve additionally used Font Superior icons for the cart and consumer icons, which you’ll want to incorporate in your venture by following the directions on their website.

Step 5: Styling the navbar

Now that now we have the construction in place, let’s add some kinds to make our navbar look extra interesting. Open the Navbar.css file and add the next kinds:

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

.navbar-left .emblem {
  font-size: 1.5rem;
  font-weight: daring;
  coloration: #fff;
  text-decoration: none;
}

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

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

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

.navbar-right {
  show: flex;
  align-items: heart;
}

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

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

Step 6: Importing and rendering the navbar

Lastly, we have to import the Navbar part and render it in our App.js file:

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

perform App() {
  return (
<div>
  <Navbar /v>
  {}
</div>
);
}

export default App;

Now, whenever you run your React app, it is best to see the navbar on the high of the web page, as proven on this Pen.

Click on the 0.5x button within the Pen above to see the desktop format of the navbar.

Step 7: Finest Practices: Enhancing Accessibility

Constructing an accessible navbar is essential for making certain that every one customers can successfully navigate your web site.

Listed here are some finest practices to comply with.

• Use semantic HTML. We’ve already used semantic HTML components in our navbar code. The principle navigation part is wrapped in a <nav> component, the record of hyperlinks is contained inside an unordered record (<ul>) with every hyperlink as a listing merchandise (<li>), and the hyperlinks themselves are represented by <a> components.

• Add ARIA roles and attributes. We will add the position="navigation" attribute to the <nav> component to point that it’s a navigation part:

  <nav className="navbar" position="navigation">
       {}
  </nav>

• Guarantee keyboard accessibility. >React gives built-in assist for keyboard accessibility. By default, all interactive components (akin to hyperlinks and buttons) will be targeted utilizing the tab key and activated utilizing the Enter or House keys. Nonetheless, we should always check this performance to make sure it really works as anticipated in our navbar.

• Present clear focus kinds. To supply clear focus kinds, we are able to add CSS guidelines for the :focus state of our hyperlinks and icons. Right here’s an instance of how we are able to fashion the targeted hyperlinks in our navbar:

  .navbar-center .nav-links a:hover {
    coloration: crimson;
  }
  

  You possibly can alter the define and outline-offset properties to attain the specified focus fashion.

• Use descriptive hyperlink textual content. In our navbar code, we’ve already used descriptive hyperlink textual content for the navigation hyperlinks (“Merchandise”, “About Us”, “Contact”). Nonetheless, we should always be certain that the hyperlink textual content for the cart and consumer icons can also be descriptive. One method to obtain that is by including visually hidden textual content utilizing the aria-label attribute:

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

• Make the format responsive. To make our navbar responsive, we are able to use CSS media queries to regulate the format and kinds primarily based on the display screen dimension. For instance, we may cover the navigation hyperlinks on smaller screens and exchange them with a hamburger menu:

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

  Within the JavaScript code, we’d must deal with the toggling of the navigation hyperlinks when the hamburger menu is clicked.

By implementing these accessibility finest practices, we are able to be certain that our navbar is usable and inclusive for all customers, together with these with disabilities. Keep in mind to check your utility with numerous display screen readers, keyboard navigation, and different assistive applied sciences to make sure it meets accessibility requirements.

Wrapping Up

And that’s it! You now have your self a navigation bar that you could reuse throughout your utility that ensures your customers are capable of finding their method inside your app.

To take a look at the total code, discover the CodePen demo.

Regularly Requested Questions (FAQs)