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">
    <!-- le menu du compte : voir « Menu du compte » -->
  </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)

Seulement s'il porte un lien absent du reste de la page : la règle est dans Architecture › Navigation. Une app à deux niveaux (liste → fiche) n'en a pas.

<nav class="text-sm text-base-content/40 mb-3">
  <a href="/catalogue" class="hover:text-base-content transition-colors">Catalogue</a>
  <span class="mx-1.5">/</span>
  <a href="/marques/stanley-stella" class="hover:text-base-content transition-colors">Stanley/Stella</a>
  <span class="mx-1.5">/</span>
  <span class="text-base-content/70">Creator 2.0</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-border">
  <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>

Menu du compte

Tout à droite de la navbar de chaque app interne. L'adresse de la personne connectée l'ouvre ; il regroupe les réglages de l'app (Accès, Notifications) sous « Administration » et finit toujours sur Déconnexion. Les réglages ne sont jamais dans la navbar elle-même. En Rails : account_menu(email, sign_out_path:) { account_menu_item(…) }.

<%= account_menu current_user.email_address, sign_out_path: session_path do %>
  <%= account_menu_item "Accès", access_path, icon: "key" %>
  <%= account_menu_item "Notifications", notifications_path, icon: "bell" %>
<% end %>

Règles