NavLink

Installation

npx shadcn@latest add @oward/navlink

Introduction

Dans la plupart des applications React, gérer l'état actif des liens de navigation nécessite d'utiliser des hooks comme usePathname() ou useLocation() dans chaque composant, puis d'écrire de la logique de comparaison d'URL pour appliquer les styles appropriés. Cela devient vite répétitif et difficile à maintenir.

NavLink résout ce problème en centralisant toute cette logique dans un composant réutilisable. Il détecte automatiquement si le lien correspond à l'URL actuelle et applique les classes CSS appropriées, sans que vous ayez à écrire de hooks ou de logique conditionnelle.

La détection se fait côté client après le rendu, ce qui permet de fonctionner correctement avec des composants comme Link de next-intl ou tout autre système qui réécrit les URLs. Le composant analyse l'URL finale rendue dans le DOM, garantissant ainsi une correspondance précise quelle que soit la bibliothèque de routing utilisée.

Cela améliore considérablement l'expérience développeur tout en garantissant la cohérence du comportement de navigation dans toute votre application.

Fonctionnalités

• SSR et SSG compatibles : Fonctionne parfaitement avec le rendu côté serveur et le rendu statique.
• Supporte tous les systèmes de routing : Compatible avec Next.js, React Router, Next-intl...
• Modes de correspondance flexibles : "auto", "exact" ou boolean pour un contrôle total.
• Options avancées : Inclure le hash et les paramètres de requête dans la correspondance.
• Accessibilité intégrée : Ajoute automatiquement aria-current="page" pour une meilleure accessibilité.
• Optimisé pour la performance : Utilise la Navigation API

Utilisation

Le composant NavLink enveloppe n'importe quel élément de lien (Link de Next.js, React Router, etc.) et applique automatiquement une classe CSS lorsque l'URL correspond au lien.

Exemple de base

import { NavLink } from "@/ui/navlink";
import Link from "next/link";

export default function Navigation() {
  return (
    <nav className="flex gap-4">
      <NavLink currentClassName="text-blue-600 font-semibold">
        <Link href="/about">À propos</Link>
      </NavLink>
      <NavLink currentClassName="text-blue-600 font-semibold">
        <Link href="/contact">Contact</Link>
      </NavLink>
    </nav>
  );
}

Props

Modes de correspondance

Mode "auto" (par défaut)

Correspond si l'URL actuelle commence par le href du lien.

<NavLink current="auto" currentClassName="text-blue-600">
  <Link href="/docs">Documentation</Link>
</NavLink>

Mode "exact"

Correspond uniquement si l'URL actuelle est exactement identique au href du lien.

<NavLink current="exact" currentClassName="text-blue-600">
  <Link href="/docs">Documentation</Link>
</NavLink>

Mode boolean

Force l'état actif/inactif manuellement, ignorant l'URL.

<NavLink current={isActive} currentClassName="text-blue-600">
  <Link href="/profile">Profil</Link>
</NavLink>

Options avancées

Inclure le hash dans la correspondance

<NavLink matchHash currentClassName="font-bold">
  <Link href="/docs#api">Documentation</Link>
</NavLink>

Inclure les paramètres de requête dans la correspondance

<NavLink matchQuery currentClassName="font-bold">
  <Link href="/products">Produits</Link>
</NavLink>

Accessibilité

Le composant ajoute automatiquement l'attribut aria-current="page" lorsque le lien est actif, conformément aux standards WCAG 2.1.

// Rendu HTML lorsque actif
<a href="/about" aria-current="page" className="text-blue-600">
  À propos
</a>

Performance

Exemples pratiques

import { NavLink } from "@/ui/navlink";
import { Button } from "@/ui/button";
import Link from "next/link";

export function MainNav() {
  return (
    <nav className="flex gap-6">
      <Button asChild variant="ghost">
        <NavLink currentClassName="text-primary font-semibold border-b-2 border-primary">
          <Link href="/">Accueil</Link>
        </NavLink>
      </Button>
      <Button asChild variant="ghost">
        <NavLink currentClassName="text-primary font-semibold border-b-2 border-primary">
          <Link href="/contact">Contact</Link>
        </NavLink>
      </Button>
    </nav>
  );
}