daisyUI : navigation et fenêtres

daisyUI fournit des composants de navigation et de superposition sans JavaScript : ils reposent sur des éléments HTML natifs (details, dialog, cases à cocher). Pour des comportements complexes, ajouter un peu de JavaScript ou un framework.

Barre de navigation

<header class="navbar bg-base-100 shadow-sm">
  <div class="navbar-start">
    <a class="btn btn-ghost text-xl" href="/">Mon site</a>
  </div>
  <nav class="navbar-center hidden lg:flex" aria-label="Navigation principale">
    <ul class="menu menu-horizontal px-1">
      <li><a href="/projets/">Projets</a></li>
      <li><a href="/docs/">Docs</a></li>
    </ul>
  </nav>
  <div class="navbar-end">
    <a class="btn btn-primary" href="/contact/">Contact</a>
  </div>
</header>

navbar-start, navbar-center et navbar-end répartissent le contenu. Pour fixer la barre en haut : sticky top-0 z-10.

Menu

<ul class="menu bg-base-200 rounded-box w-56">
  <li class="menu-title">Rubriques</li>
  <li><a href="/a/" class="menu-active">Actif</a></li>
  <li><a href="/b/">Autre</a></li>
  <li>
    <details open>
      <summary>Sous-menu</summary>
      <ul>
        <li><a href="/c/">Premier</a></li>
        <li><a href="/d/">Second</a></li>
      </ul>
    </details>
  </li>
  <li class="menu-disabled"><a>Indisponible</a></li>
</ul>

menu-active marque l’élément courant (à positionner côté serveur ou avec le routeur du framework) ; menu-horizontal met le menu en ligne ; menu-sm à menu-lg règlent la taille.

Tiroir latéral (drawer)

Menu qui coulisse sur mobile et reste fixe sur grand écran :

<div class="drawer lg:drawer-open">
  <input id="tiroir" type="checkbox" class="drawer-toggle" />

  <div class="drawer-content flex flex-col">
    <label for="tiroir" class="btn btn-primary drawer-button lg:hidden"
      >Menu</label
    >
    <main class="p-6">Contenu de la page</main>
  </div>

  <div class="drawer-side">
    <label
      for="tiroir"
      aria-label="Fermer le menu"
      class="drawer-overlay"
    ></label>
    <ul class="menu bg-base-200 text-base-content min-h-full w-72 p-4">
      <li><a href="/a/">Accueil</a></li>
      <li><a href="/b/">Projets</a></li>
    </ul>
  </div>
</div>

La case à cocher drawer-toggle porte l’état ouvert/fermé : aucun script nécessaire. lg:drawer-open garde le menu visible à partir du point de rupture lg.

Fenêtre modale

Avec l’élément natif <dialog> :

<button class="btn" onclick="confirmation.showModal()">Supprimer</button>

<dialog id="confirmation" class="modal">
  <div class="modal-box">
    <h3 class="text-lg font-bold">Confirmer la suppression</h3>
    <p class="py-4">Cette action est définitive.</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn">Annuler</button>
        <button class="btn btn-error">Supprimer</button>
      </form>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button aria-label="Fermer">fermer</button>
  </form>
</dialog>

Élément	Rôle
showModal()	Ouvre la fenêtre (gère le focus, la touche Échap et l’arrière-plan inerte)
form method="dialog"	Ferme la fenêtre au clic sur un bouton
modal-backdrop	Un clic à l’extérieur ferme la fenêtre
modal-bottom, modal-middle	Position

Le <dialog> natif est accessible : piège de focus, fermeture par Échap, rôle annoncé. Préférer cette forme aux fenêtres bricolées avec des div.

Menu déroulant

<div class="dropdown">
  <div tabindex="0" role="button" class="btn m-1">Options</div>
  <ul
    tabindex="0"
    class="dropdown-content menu bg-base-100 rounded-box z-10 w-52 p-2 shadow-sm"
  >
    <li><a href="/profil/">Profil</a></li>
    <li><a href="/deconnexion/">Déconnexion</a></li>
  </ul>
</div>

Variantes : dropdown-end (aligné à droite), dropdown-top, dropdown-hover (ouvre au survol, déconseillé sur écran tactile). La version avec <details> fonctionne sans JavaScript :

<details class="dropdown">
  <summary class="btn">Options</summary>
  <ul
    class="menu dropdown-content bg-base-100 rounded-box z-10 w-52 p-2 shadow-sm"
  >
    <li><a>Profil</a></li>
  </ul>
</details>

Onglets

<div role="tablist" class="tabs tabs-border">
  <input
    type="radio"
    name="onglets"
    class="tab"
    aria-label="Description"
    checked
  />
  <div class="tab-content p-4">Contenu de la description.</div>

  <input type="radio" name="onglets" class="tab" aria-label="Avis" />
  <div class="tab-content p-4">Contenu des avis.</div>
</div>

Les boutons radio portent l’onglet actif sans JavaScript. Variantes : tabs-box, tabs-border, tabs-lift.

Accordéon

<div class="join join-vertical w-full">
  <div class="collapse-arrow join-item border-base-300 collapse border">
    <input type="radio" name="accordeon" checked />
    <div class="collapse-title font-semibold">Comment installer ?</div>
    <div class="collapse-content text-sm">
      Exécuter la commande d'installation.
    </div>
  </div>
  <div class="collapse-arrow join-item border-base-300 collapse border">
    <input type="radio" name="accordeon" />
    <div class="collapse-title font-semibold">Comment configurer ?</div>
    <div class="collapse-content text-sm">
      Modifier le fichier de configuration.
    </div>
  </div>
</div>

Pour une section dépliante simple, <details class="collapse"> fonctionne aussi.

Notifications

<div class="toast toast-end">
  <div role="status" class="alert alert-success"><span>Enregistré.</span></div>
</div>

Afficher et masquer le toast demande un peu de JavaScript (ou l’état du framework).

Accessibilité

• Utiliser <nav aria-label="…"> pour chaque zone de navigation.
• Préférer <dialog> et <details> aux composants construits avec des div et des classes seules.
• Les menus déroulants à tabindex demandent un test au clavier ; privilégier <details>.
• Donner un aria-label aux boutons-icônes.
• Éviter l’ouverture au survol seul (dropdown-hover) : inutilisable au clavier et sur tactile.

Dépannage

Symptôme	Piste
La modale ne s’ouvre pas	id du <dialog> différent de l’appel showModal()
Le menu déroulant se ferme au clic dans la liste	Comportement lié au focus : utiliser <details>
Le tiroir reste ouvert après un clic sur un lien	Fermer en décochant drawer-toggle dans un gestionnaire de clic
Le menu déroulant passe sous un autre élément	Ajouter z-10 (ou plus) au contenu
Les onglets ne changent pas	Les boutons radio doivent partager le même name
La barre de navigation déborde sur mobile	Masquer le menu horizontal (hidden lg:flex) et utiliser un tiroir

Ubuntu 24.04 et 26.04 : différences à connaître

Aucune.

Pour aller plus loin

• Modal, Drawer, Navbar
• Suite : Thèmes et couleurs

Dans la même rubrique

• Installation
• Composants de base
• Formulaires
• Navigation et fenêtres
• Thèmes et couleurs
• Intégration avec Astro, React et Next.js
• Migration et dépannage