Créer une barre de navigation avec Tailwind CSS

Temps de lecture : 22 minutes environ.

Dans ce tutoriel, nous allons apprendre à créer une navbar avec un menu burger à la main en utilisant le framework Tailwind CSS. Ce tutoriel est conçu pour vous aider à comprendre comment Tailwind CSS fonctionne et comment vous pouvez l'utiliser pour créer des composants de navigation réactifs.

Préparation de l'environnement

Configuration du Projet

Nous commençons par configurer la structure du projet

src/

├── css/

├── js/

└── index.html

Pour initialiser le projet avec npm, ouvrez votre terminal, naviguez jusqu'à votre dossier de projet, puis exécutez la commande suivante pour initialiser un nouveau projet npm :

npm init -y

Cette commande crée un fichier package.json dans votre projet.

Installation de Tailwind CSS

Pour installer Tailwind CSS, exécutez la commande suivante :

npm install -D tailwindcss

Cette commande installe Tailwind CSS en tant que dépendance de développement et crée un dossier node_modules.

Exécutez la commande suivante pour générer un fichier de configuration Tailwind CSS par défaut :

npx tailwindcss init

Configuration de Tailwind CSS

Ouvrez le fichier tailwind.config.js et modifiez la section content pour inclure tous les fichiers HTML et JavaScript dans le dossier src :

module.exports = {

  content: [

    "./src/**/*.{html,js}",

  ],

  theme: {

    extend: {},

  },

  plugins: [],

}

Cela permet à Tailwind de supprimer le CSS inutilisé lors de la compilation.

Dans le dossier src/css, créez un fichier nommé input.css et ajoutez-y les directives Tailwind suivantes :

@tailwind base;

@tailwind components;

@tailwind utilities;

Ces directives importent les bases, les composants et les utilitaires de Tailwind CSS.

Exécuter la compilation

Pour exécuter la compilation du CSS, utiliser la commande suivante

npx tailwindcss -i ./src/css/input.css -o ./src/css/style.css --watch

Cela crée le fichier style.css dans le dossier src/css et commence à surveiller les changements dans vos fichiers HTML et JS.

Configurer le code HTML de base

Dans le fichier src/index.html, ajoutez la structure HTML de base et liez le fichier CSS compilé :

<!DOCTYPE html>

<html lang="fr">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Navbar avec Tailwind CSS</title>

  <link href="./css/style.css" rel="stylesheet">

  <script src="./js/nav.js" defer></script>

</head>

<body>

  <nav>

    <!-- Contenu de la navbar ici -->

  </nav>



</body>

</html>

Ce fichier HTML inclut le CSS compilé et le script JavaScript que nous allons créer pour le menu burger.

Création de la Navbar

Dans le fichier index.html, ajoutez la structure HTML de base pour la navbar :

<nav>

	<div>

        <a href="#">Ma Navbar</a>

        <div>

            <button>

                <span>Ouvrir le menu</span>

                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">

                    <path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>

                </svg>

            </button>

        </div>

        <div id="main-nav">

            <ul>

                <li>

                    <a href="#">Accueil</a>

                </li>

                <li>

                    <a href="#">Services</a>

                </li>

                <li>

                    <a href="#">Contact</a>

                </li>

            </ul>

        </div>

    </div>

</nav>

Explications :

<nav> : Cette balise nav représente la barre de navigation avec un fond gris clair, fixée en haut de la page, occupant toute la largeur et avec un index z pour la superposition.

<div> : Cette div est un conteneur flexbox centré horizontalement avec un espace entre les éléments et un padding de 1rem (16px).

<a href="#"></a> : Ceci est un lien de logo.

<button> : Ce bouton est visible en mode mobile (block), mais caché en mode bureau (md:hidden). Il contient un icône SVG pour le menu burger.

<span>Ouvrir le menu</span> : Ce span est uniquement visible par les lecteurs d'écran pour l'accessibilité.

<ul> : Cette liste non ordonnée représente les éléments du menu, cachée par défaut (hidden) et affichée en flexbox en mode bureau (md:flex) avec un espace horizontal entre les éléments.

Styliser la Navbar avec Tailwind CSS

Nous allons appliquer plusieurs classes Tailwind CSS dans le code HTML ci-dessus afin de mettre en forme notre navbar.

<nav class="bg-gray-100 fixed w-full z-10 top-0 start-0">

    <div class="p-4 flex items-center justify-between flex-wrap">

        <a href="#">Ma Navbar</a>

        <div class="md:hidden">

            <button data-collapse-toggle="#main-nav">

                <span class="sr-only">Ouvrir le menu</span>

                <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">

                    <path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>

                </svg>

            </button>

        </div>

        <div class="w-full hidden md:block md:w-max" id="main-nav">

            <ul class="p-4 mt-4 bg-gray-50 font-medium border border-gray-200 md:flex md:bg-transparent md:border-0 md:mt-0">

                <li>

                    <a href="#" class="bg-blue-700 text-white block px-3 py-2">Accueil</a>

                </li>

                <li>

                    <a href="#" class="block px-3 py-2 md:hover:bg-blue-700 md:hover:text-white">Services</a>

                </li>

                <li>

                    <a href="#" class="block px-3 py-2 md:hover:bg-blue-700 md:hover:text-white">Contact</a>

                </li>

            </ul>

        </div>

    </div>

</nav>

Voici quelques-unes des classes utilisées et leurs significations :

bg-gray-100 : Applique un fond gris clair.
fixed : Positionne l'élément de manière fixe par rapport à la fenêtre.
w-full : Définit la largeur de l'élément à 100%.
z-10 : Définit l'index z de l'élément à 10.
top-0 : Positionne l'élément en haut.
left-0 : Positionne l'élément à gauche.
flex : Définit l'élément comme un conteneur flexbox.
justify-between : Espace les éléments enfants de manière égale.
items-center : Centre verticalement les éléments enfants.
p-4 : Ajoute un padding de 1rem (16px).
text-lg : Définit une taille de texte large.
font-bold : Définit le texte en gras.
block : Affiche l'élément en tant que bloc.
md:hidden : Cache l'élément en mode bureau.
hidden : Cache l'élément.
md:flex : Affiche l'élément en flexbox en mode bureau.

Fonctionnalité du Menu Burger avec JavaScript

Créer le Script JavaScript

Dans le dossier src/js, créez un fichier nommé nav.js.

Dans ce fichier nav.js, ajoutez le code suivant pour gérer l'ouverture et la fermeture du menu burger :

const toggleElements = document.querySelectorAll("[data-collapse-toggle]");



for(let toggleElement of toggleElements){

    toggleElement.addEventListener("click", function(){

        const elementId = this.dataset.collapseToggle;

        

        const menu = document.querySelector(elementId);

        menu.classList.toggle("hidden");

    });

}

Conclusion

Vous avez maintenant une navbar fonctionnelle avec un menu burger, construite à la main en utilisant Tailwind CSS. Vous pouvez ajuster les styles et les fonctionnalités selon vos besoins en utilisant les classes utilitaires de Tailwind CSS et en ajoutant des fonctionnalités supplémentaires avec JavaScript.

N'hésitez pas à explorer davantage Tailwind CSS pour découvrir d'autres classes utilitaires et à ajuster votre projet pour répondre à vos besoins spécifiques. Si vous avez des questions ou des problèmes, rejoignez notre serveur Discord pour obtenir de l'aide et des conseils supplémentaires.

Merci pour votre attention et bonne création avec Tailwind CSS !

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat

Créer une barre de navigation avec Tailwind CSS

Article publié le 2 avril 2024

Catégorie : TailwindCSS

Mots-clés : navbar tailwind tailwindcss

Partager :

Partager sur Facebook

Partager sur Twitter

Partager sur LinkedIn