Composant de barre de navigation

Barre de navigation CSS Tailwind uniquement en CSS avec marque, liens de navigation et emplacements d'action. Variantes collantes et transparentes. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Les composants de la barre de navigation affichent des listes de navigation horizontales pour la structure du site et la navigation des utilisateurs. Construit avec des éléments de navigation et de liste HTML sémantiques, le système de barre de navigation Frutjam prend en charge plusieurs mises en page, un comportement réactif et l'intégration de menus imbriqués. Accessibles et navigables au clavier, les barres de navigation sont idéales pour la navigation sur le site principal, le fil d'Ariane et les interfaces à onglets.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Barre de navigation

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<nav class="navbar">
  <ul class="navbar-list gap-x-6">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<nav className="navbar">
  <ul className="navbar-list gap-x-6">
    <li>
      <a className="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a className="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a className="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Emplacements dans la barre de navigation

Le composant navbar est par défaut positionné au début (à gauche dans LTR). Utilisez navbar-start, navbar-center ou navbar-end pour l'alignement horizontal, et navbar-top, navbar-middle ou navbar-bottom pour l'alignement vertical. Le placement est compatible RTL.

Utilisez des classes de placement horizontal pour aligner la liste de la barre de navigation le long de l'axe X et des classes de placement vertical lorsque la barre de navigation a une hauteur personnalisée.

Emplacements horizontaux

Contrôlez la façon dont la navbar-list se situe le long de l'axe X. Ceux-ci sont compatibles RTL (Début/Fin au lieu de Gauche/Droite).

Aligner horizontalement vers la gauche (début)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<nav class="navbar navbar-start">
  <ul class="navbar-list gap-x-6">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Aligner horizontalement au centre

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<nav class="navbar navbar-center">
  <ul class="navbar-list gap-x-6">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Aligner horizontalement vers la droite (fin)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<nav class="navbar navbar-end">
  <ul class="navbar-list gap-x-6">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Emplacements verticaux

Contrôlez l’alignement le long de l’axe Y. Ceci est particulièrement utile lorsque la barre de navigation a une hauteur personnalisée.

Aligner verticalement vers le haut (début)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<nav class="navbar navbar-top h-56">
  <ul class="navbar-list">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Aligner verticalement au centre

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<nav class="navbar navbar-middle h-56">
  <ul class="navbar-list">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>

Aligner verticalement vers le bas (extrémité)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<nav class="navbar navbar-bottom h-56">
  <ul class="navbar-list">
    <li>
      <a class="link link-xs link-hover">Navbar list 1</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 2</a>
    </li>
    <li>
      <a class="link link-xs link-hover">Navbar list 3</a>
    </li>
  </ul>
</nav>