Passer au contenu principal
Frutjam logo Frutjam
v2.2.2
Theme

Composant de barre de navigation

Dernière mise à jour:

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.

Classe Taper Description
navbarBaseConteneur de la barre de navigation horizontale
navbar-listModificateurListe horizontale des liens de navigation
navbar-startModificateurEmplacement gauche pour le logo ou le premier groupe de navigation
navbar-centerModificateurFente centrale pour la navigation principale
navbar-endModificateurEmplacement droit pour les actions et les contrôles
navbar-topModificateurPositionne la barre de navigation en haut de la fenêtre
navbar-middleModificateurCentré verticalement au sein d'un parent
navbar-bottomModificateurPositionne la barre de navigation en bas de la fenêtre

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)

html 
 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

html 
 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)

html 
 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)

html 
 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

html 
 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é)

html 
 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>