---
title: "Sidebar"
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 Sidebar with collapsible panels, icons, and nested menus. Responsive dashboard navigation for admin layouts and multi-section applications."
url: https://frutjam.com/fr/components/sidebar
---

# Sidebar Component

Les composants de la barre latérale organisent la navigation principale et le contenu auxiliaire dans un panneau latéral fixe ou pliable. Construites avec du HTML sémantique, les barres latérales améliorent la navigation sans consommer d'espace de contenu principal. Le système de barre latérale Frutjam prend en charge plusieurs mises en page, largeurs et comportements, idéal pour les tableaux de bord d'administration, les sites de documentation et les applications complexes.

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                                                      |
| ------- | ----- | ---------------------------------------------------------------- |
| sidebar | Base  | Panneau latéral fixe pour la navigation et le contenu auxiliaire |

## Utilisation de base

Utilisez la classe `sidebar` sur un élément `aside`. Placez-le à côté de votre contenu principal dans un conteneur flexible.

## Navigation dans la barre latérale

Une barre latérale de navigation complète avec des sections regroupées et un style d'état actif.

```html
<div class="flex min-h-105">
  <aside class="sidebar w-64">
    <ul class="menu p-4">
      <li class="menu-title"><span>Dashboard</span></li>
      <li><a class="menu-item menu-item menu-active">Overview</a></li>
      <li><a class="menu-item">Analytics</a></li>
      <li class="menu-title mt-4"><span>Management</span></li>
      <li><a class="menu-item">Users</a></li>
      <li><a class="menu-item">Inventory</a></li>
      <li><a class="menu-item">Settings</a></li>
    </ul>
  </aside>
  <main class="flex-1 p-6">
    <h2 class="heading-2xl">Overview</h2>
    <p class="para-base mt-2">Page content goes here.</p>
  </main>
</div>
```

## Barre latérale pliable

Pour les barres latérales mobiles ou superposées, combinez la classe `sidebar` avec le composant de dialogue `tiroir tiroir-start`.

```html
<button type="button" class="btn btn-primary btn-sm" onclick="sidebarDrawer.show()">Open Sidebar</button>

<dialog class="drawer drawer-start" id="sidebarDrawer">
  <div class="drawer-content">
    <aside class="sidebar h-full w-64">
      <ul class="menu p-4">
        <li class="menu-title"><span>Dashboard</span></li>
        <li><a class="menu-item">Home</a></li>
        <li><a class="menu-item">Profile</a></li>
        <li><a class="menu-item">Settings</a></li>
        <li><a class="menu-item">Logout</a></li>
      </ul>
    </aside>
  </div>
  <button type="button" class="drawer-backdrop" onclick="sidebarDrawer.close()">Close Sidebar via Backdrop</button>
</dialog>
```