Création d’une barre de navigation dans React –

Cet article vous montrera comment créer une barre de navigation (« navbar ») dans React, tout en couvrant tout, des considérations de conception aux meilleures pratiques de mise en œuvre et d’accessibilité.

L’une des parties essentielles de toute application Web est la barre de navigation, car elle permet aux utilisateurs de naviguer à travers les différentes pages et sections du site Web.

Il est donc important que vous créiez une barre de navigation contenant les liens requis, ainsi que les bonnes mesures d’accessibilité pour garantir que vos utilisateurs puissent s’orienter dans votre application.

Points clés à retenir

• Une barre de navigation est un élément crucial de tout site Web, car elle offre aux utilisateurs un moyen de naviguer à travers différentes pages et sections.
• React permet la création de composants réutilisables et modulaires, ce qui en fait un excellent choix pour créer des interfaces utilisateur complexes telles que des barres de navigation.
• L’accessibilité doit être une priorité absolue lors de la création d’une barre de navigation, garantissant que tous les utilisateurs, y compris ceux handicapés, peuvent naviguer efficacement sur votre site Web.

Qu’est-ce qu’une barre de navigation ?

Une barre de navigation est un élément de l’interface utilisateur qui apparaît généralement en haut ou sur le côté d’une page Web.

Il sert d’aide à la navigation, fournissant des liens ou des boutons permettant aux utilisateurs d’accéder à différentes sections ou pages du site Web.

Il est essentiel pour créer une expérience utilisateur transparente et intuitive, car il aide les utilisateurs à comprendre la structure et la hiérarchie du site Web et leur permet de se déplacer sans effort entre les différentes parties de l’application.

Voici quelques exemples de barres de navigation bien conçues :

Airbnb. La barre de navigation d’Airbnb présente un design épuré et minimaliste, avec des liens clairs vers diverses sections du site Web, telles que « Lieux de séjour », « Expériences » et « Expériences en ligne ».

Boîte de dépôt. La barre de navigation Dropbox est simple mais efficace, avec un menu déroulant « Produits » bien visible qui permet aux utilisateurs d’explorer différentes offres.

Construire une barre de navigation dans React

Maintenant que nous comprenons l’importance des barres de navigation, passons au processus de création d’une barre de navigation à l’aide de React.

Pour cet exemple, nous allons créer une barre de navigation pour un site Web de commerce électronique appelé « ShopNow ».

Étape 1 : Concevoir la barre de navigation

Avant de commencer à coder, il est essentiel d’avoir en tête une conception claire de notre barre de navigation.

Pour notre site Web ShopNow, nous viserons un design simple mais moderne avec les éléments suivants :

• un logo sur le côté gauche
• des liens vers différentes sections du site Web (telles que « Produits », « À propos de nous » et « Contact »)
• une icône de panier avec un badge affichant le nombre d’articles dans le panier
• une icône d’utilisateur pour les actions liées au compte (telles que « Connexion » et « Mon compte »)

Voici une maquette de ce à quoi pourrait ressembler notre barre de navigation.

Étape 2 : Mise en place du projet React

Avant de commencer à créer notre barre de navigation, nous devrons configurer un nouveau projet React. Vous pouvez créer un nouveau projet React en utilisant Créer une application React en exécutant la commande suivante dans votre terminal :

npx create-react-app shopnow

Une fois le projet configuré, accédez au répertoire du projet et démarrez le serveur de développement :

cd shopnow
npm start

Étape 3 : Création du composant de barre de navigation

Avec SPA Pour des frameworks comme React, il est important que vous conceviez et réfléchissiez en composants réutilisables et indépendants. Il est donc crucial de créer des composants que vous pourrez réutiliser dans toute votre application.

Une application d’un composant réutilisable est une barre de navigation. Vous pouvez créer un composant de barre de navigation réutilisable que vous pourrez réutiliser dans votre application.

Créons un nouveau fichier appelé Navbar.js dans le src répertoire et ajoutez le code suivant :

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

const Navbar = () => {
  return (

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

export default Navbar;

Nous avons créé un composant fonctionnel appelé Navbar qui renvoie un <nav> élément avec un nom de classe de navbar. Nous allons également créer un nouveau fichier appelé Navbar.css dans le même répertoire pour styliser notre barre de navigation.

Étape 4 : Ajout de la structure de la barre de navigation

Ajoutons maintenant la structure de notre barre de navigation à l’intérieur du Navbar composant:

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;

Dans ce code, nous avons divisé la barre de navigation en trois sections :

1. navbar-left. Celui-ci contient le logo, qui est un lien vers la page d’accueil.
2. navbar-center. Celui-ci contient une liste non ordonnée (<ul>) des liens de navigation.
3. navbar-right. Celui-ci contient une icône de panier avec un badge affichant le nombre d’articles dans le panier et une icône d’utilisateur pour les actions liées au compte.

Nous avons également utilisé des icônes Font Awesome pour les icônes de panier et d’utilisateur, que vous devrez inclure dans votre projet en en suivant les instructions sur leur site.

Étape 5 : Styliser la barre de navigation

Maintenant que nous avons la structure en place, ajoutons quelques styles pour rendre notre barre de navigation plus attrayante. Ouvrez le Navbar.css fichier et ajoutez les styles suivants :

.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;
}

Étape 6 : Importation et rendu de la barre de navigation

Enfin, nous devons importer le Navbar composant et le restituer dans notre App.js déposer:

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

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

export default App;

Désormais, lorsque vous exécutez votre application React, vous devriez voir la barre de navigation en haut de la page, comme indiqué dans Ce stylo.

Clique le 0,5x dans le stylet ci-dessus pour voir la disposition du bureau de la barre de navigation.

Étape 7 : Meilleures pratiques : améliorer l’accessibilité

Créer une barre de navigation accessible est crucial pour garantir que tous les utilisateurs peuvent naviguer efficacement sur votre site Web.

Voici quelques bonnes pratiques à suivre.

• Utiliser du HTML sémantique. Nous avons déjà utilisé des éléments HTML sémantiques dans notre code de barre de navigation. La section de navigation principale est enveloppée dans un <nav> élément, la liste des liens est contenue dans une liste non ordonnée (<ul>) avec chaque lien comme élément de liste (<li>), et les liens eux-mêmes sont représentés par <a> éléments.

• Ajouter des rôles et des attributs ARIA. On peut ajouter le role="navigation" attribuer au <nav> élément pour indiquer qu’il s’agit d’une section de navigation :

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

• Assurer l’accessibilité du clavier. >React fournit une prise en charge intégrée de l’accessibilité au clavier. Par défaut, tous les éléments interactifs (tels que les liens et les boutons) peuvent être mis en évidence à l’aide de l’icône languette clé et activé à l’aide de la Entrer ou Espace clés. Cependant, nous devons tester cette fonctionnalité pour nous assurer qu’elle fonctionne comme prévu dans notre barre de navigation.

• Fournir des styles de mise au point clairs. Pour fournir des styles de focus clairs, nous pouvons ajouter des règles CSS pour le :focus état de nos liens et icônes. Voici un exemple de la façon dont nous pouvons styliser les liens ciblés dans notre barre de navigation :

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

  Vous pouvez ajuster le outline et outline-offset propriétés pour obtenir le style de mise au point souhaité.

• Utiliser un texte de lien descriptif. Dans notre code de barre de navigation, nous avons déjà utilisé un texte de lien descriptif pour les liens de navigation (« Produits », « À propos de nous », « Contact »). Cependant, nous devons nous assurer que le texte du lien pour les icônes du panier et de l’utilisateur est également descriptif. Une façon d’y parvenir consiste à ajouter du texte visuellement masqué à l’aide de l’option aria-label attribut:

    <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>

• Rendre la mise en page réactive. Pour rendre notre barre de navigation réactive, nous pouvons utiliser des requêtes multimédias CSS pour ajuster la mise en page et les styles en fonction de la taille de l’écran. Par exemple, nous pourrions masquer les liens de navigation sur des écrans plus petits et les remplacer par un menu hamburger :

  @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;
       }
     }

  Dans le code JavaScript, nous aurions besoin de gérer le basculement des liens de navigation lorsque l’on clique sur le menu hamburger.

En mettant en œuvre ces bonnes pratiques en matière d’accessibilité, nous pouvons garantir que notre barre de navigation est utilisable et inclusive pour tous les utilisateurs, y compris ceux handicapés. N’oubliez pas de tester votre application avec divers lecteurs d’écran, navigation au clavier et autres technologies d’assistance pour vous assurer qu’elle répond aux normes d’accessibilité.

Emballer

Et c’est tout! Vous disposez désormais d’une barre de navigation que vous pouvez réutiliser dans votre application et qui garantit que vos utilisateurs peuvent s’orienter dans votre application.

Pour consulter le code complet, explorez le Démo CodePen.

Foire aux questions (FAQ)