Navigation

Navbar (app interne — fond foncé)

Utilisée dans les apps Rails (prodspe, ERP, catalogue admin). Fond neutral (= mc-navy), liens visibles à plat — jamais dans un dropdown pour la nav principale.

<nav class="navbar bg-neutral text-neutral-content shadow-sm rounded-lg">
  <div class="navbar-start gap-3">
    <div class="bg-mc-green rounded px-2 py-1">
      <span class="text-white font-accent font-bold text-xs">MC</span>
    </div>
    <span class="font-accent font-bold text-sm">Catalogue</span>
  </div>
  <div class="navbar-center hidden md:flex gap-6">
    <a href="#" class="text-sm text-neutral-content font-accent font-bold">Produits</a>
    <a href="#" class="text-sm text-neutral-content/60 hover:text-neutral-content transition-colors">Fournisseurs</a>
    <a href="#" class="text-sm text-neutral-content/60 hover:text-neutral-content transition-colors">Commandes</a>
  </div>
  <div class="navbar-end gap-2">
    <button class="btn btn-ghost btn-sm text-neutral-content/60 hover:text-neutral-content">NJ</button>
  </div>
</nav>

État actif des liens (top nav)

Dans la navbar (niveau 1, fond foncé), l'état actif utilise un léger fond blanc semi-transparent bg-white/10. La sidebar contextuelle (niveau 2), elle, est sur fond clair : son actif est bg-mc-green-50 text-mc-navy font-bold (voir Architecture → Navigation).

<!-- Lien actif -->
<a class="text-sm font-accent font-bold text-neutral-content bg-white/10 px-3 py-1.5 rounded">Produits</a>

<!-- Lien inactif -->
<a class="text-sm font-accent text-neutral-content/70 hover:text-neutral-content hover:bg-white/10 px-3 py-1.5 rounded transition-colors">Fournisseurs</a>

Fil d'Ariane (breadcrumb)

Toujours présent dans les apps internes pour la navigation retour. Jamais remplacer par un bouton "← Retour" ou window.history.back().

<nav class="text-sm text-base-content/40 mb-3">
  <a href="/commandes" class="hover:text-base-content transition-colors">Commandes</a>
  <span class="mx-1.5">/</span>
  <a href="/commandes/241" class="hover:text-base-content transition-colors">CMD-0241</a>
  <span class="mx-1.5">/</span>
  <span class="text-base-content/70">Édition</span>
</nav>

Onglets (tabs)

Pour alterner entre les vues liées au même objet. Toujours afficher l'onglet actif avec tab-active. Un compteur peut s'afficher dans le label d'onglet.

<div class="tabs tabs-bordered">
  <a class="tab tab-active">Détails</a>
  <a class="tab">Articles (12)</a>
  <a class="tab">Historique</a>
  <a class="tab">Documents</a>
</div>

Pagination

Placée sous le tableau, centrée. Indiquer le numéro de page courant et le total.

<div class="flex justify-center gap-2 mt-4">
  <a href="?page=1" class="btn btn-ghost btn-sm">← Précédent</a>
  <span class="btn btn-ghost btn-sm no-animation pointer-events-none">Page 2 / 10</span>
  <a href="?page=3" class="btn btn-ghost btn-sm">Suivant →</a>
</div>

Menu déroulant (dropdown)

Pour regrouper des actions secondaires sur un enregistrement. Toujours utiliser dropdown-end si le bouton est en bord droit d'écran. Séparer les actions destructives avec un hr.

<div class="dropdown dropdown-end">
  <button tabindex="0" class="btn btn-ghost btn-sm">Options ▾</button>
  <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box shadow-lg w-48 p-2 z-40 border border-base-200">
    <li><a class="text-sm">Modifier</a></li>
    <li><a class="text-sm">Dupliquer</a></li>
    <li><hr class="my-1 border-base-200"></li>
    <li><a class="text-sm text-error">Supprimer</a></li>
  </ul>
</div>

Règles