---
title: "Navbar"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Navbar with sticky, responsive, and dropdown-ready layouts. Semantic HTML with mobile support for accessible, theme-aware site navigation."
url: https://frutjam.com/fr/components/navbar
---

# Navbar Component

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                                                        |
| ------------- | ------------ | ------------------------------------------------------------------ |
| navbar        | Base         | Conteneur de la barre de navigation horizontale                    |
| navbar-list   | Modificateur | Liste horizontale des liens de navigation                          |
| navbar-start  | Modificateur | Emplacement gauche pour le logo ou le premier groupe de navigation |
| navbar-center | Modificateur | Fente centrale pour la navigation principale                       |
| navbar-end    | Modificateur | Emplacement droit pour les actions et les contrôles                |
| navbar-top    | Modificateur | Positionne la barre de navigation en haut de la fenêtre            |
| navbar-middle | Modificateur | Centré verticalement au sein d'un parent                           |
| navbar-bottom | Modificateur | Positionne la barre de navigation en bas de la fenêtre             |

## Barre de navigation

## 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
<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
<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
<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
<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
<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
<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>
```