Passer au contenu principal
Frutjam logo Frutjam
v2.2.5
Theme

Composant de la barre latérale

Dernière mise à jour:

Barre latérale CSS Tailwind uniquement en CSS pour les panneaux de navigation latéraux. Pliable, avec les états des éléments de navigation et les en-têtes de section. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

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
sidebarBasePanneau 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.

Main content area

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="flex min-h-90">
  <aside class="sidebar w-64">
    <ul class="menu p-4">
      <li class="menu-title"><span>Menu</span></li>
      <li><a class="menu-item">Sidebar Item 1</a></li>
      <li><a class="menu-item">Sidebar Item 2</a></li>
      <li><a class="menu-item">Sidebar Item 3</a></li>
    </ul>
  </aside>
  <main class="flex-1 p-6">
    <p class="para-base">Main content area</p>
  </main>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div className="flex min-h-90">
  <aside className="sidebar w-64">
    <ul className="menu p-4">
      <li className="menu-title"><span>Menu</span></li>
      <li><a className="menu-item">Sidebar Item 1</a></li>
      <li><a className="menu-item">Sidebar Item 2</a></li>
      <li><a className="menu-item">Sidebar Item 3</a></li>
    </ul>
  </aside>
  <main className="flex-1 p-6">
    <p className="para-base">Main content area</p>
  </main>
</div>

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.

Overview

Page content goes here.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<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>

Vous utilisez Claude Code, Cursor ou un autre éditeur d'IA ?

Cherry MCP donne à votre éditeur d'IA les noms et la structure exacts des classes Barre latérale sur demande. Fini les cours hallucinés.

Essayez Cherry MCP