Reddot UI Library

Docs
Sidebar

Sidebar

A composable, themeable, and customizable sidebar component for React applications.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/sidebar.json

Variables CSS

Ajoutez les couleurs suivantes à votre fichier CSS :

@layer base {
  :root {
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
  }
  
  .dark {
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.439 0 0);
  }
}

Utilisation de base

import { 
  SidebarProvider, 
  Sidebar, 
  SidebarContent, 
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton
} from "@/components/ui/sidebar"
 
export function AppSidebar() {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Navigation</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                <SidebarMenuItem>
                  <SidebarMenuButton>Accueil</SidebarMenuButton>
                </SidebarMenuItem>
                <SidebarMenuItem>
                  <SidebarMenuButton>À propos</SidebarMenuButton>
                </SidebarMenuItem>
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
    </SidebarProvider>
  )
}

Exemples

Sidebar avec icônes

import { Home, Settings, User } from "lucide-react"
import { 
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton
} from "@/components/ui/sidebar"
 
export function SidebarWithIcons() {
  return (
    <Sidebar>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Application</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton>
                  <Home className="h-4 w-4" />
                  <span>Accueil</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton>
                  <User className="h-4 w-4" />
                  <span>Profil</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton>
                  <Settings className="h-4 w-4" />
                  <span>Paramètres</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  )
}

Sidebar réduite

import { 
  SidebarProvider,
  Sidebar,
  SidebarTrigger
} from "@/components/ui/sidebar"
 
export function CollapsibleSidebar() {
  return (
    <SidebarProvider defaultOpen={false}>
      <Sidebar variant="inset">
        {/* Contenu de la sidebar */}
      </Sidebar>
      <main className="flex flex-1 flex-col p-4">
        <SidebarTrigger />
        {/* Contenu principal */}
      </main>
    </SidebarProvider>
  )
}

API Reference

SidebarProvider

Fournisseur de contexte pour la sidebar.

PropTypeDefaultDescription
defaultOpenbooleantrueÉtat par défaut ouvert/fermé de la sidebar.
openboolean-État contrôlé ouvert/fermé de la sidebar.
onOpenChange(open: boolean) => void-Callback appelé lorsque l'état ouvert/fermé change.

Sidebar

Conteneur principal de la sidebar.

PropTypeDefaultDescription
variant"sidebar" | "floating" | "inset""sidebar"La variante de la sidebar.
side"left" | "right""left"Le côté où la sidebar apparaît.
collapsible"offcanvas" | "icon" | "none""offcanvas"Type de comportement de réduction.

SidebarContent

Zone de contenu principale de la sidebar.

SidebarHeader

En-tête optionnel de la sidebar.

SidebarFooter

Pied de page optionnel de la sidebar.

SidebarGroup

Groupe d'éléments dans la sidebar.

SidebarGroupLabel

Label pour un groupe d'éléments.

SidebarGroupContent

Contenu d'un groupe d'éléments.

SidebarMenu

Conteneur pour les éléments de menu.

SidebarMenuItem

Élément individuel de menu.

SidebarMenuButton

Bouton de menu cliquable.

PropTypeDefaultDescription
asChildbooleanfalseRendre comme un élément enfant.
isActivebooleanfalseSi l'élément est actif/sélectionné.

SidebarTrigger

Bouton pour basculer l'état ouvert/fermé de la sidebar.

Conseils d'utilisation

Responsive

  • La sidebar se transforme automatiquement en overlay sur mobile
  • Utilisez collapsible="icon" pour garder les icônes visibles quand réduite
  • Considérez variant="floating" pour un style moderne

Accessibilité

  • Navigation au clavier automatiquement supportée
  • ARIA labels appropriés inclus
  • Focus management géré automatiquement

Thématisation

  • Utilisez les variables CSS pour personnaliser les couleurs
  • Support du mode sombre inclus
  • Variables CSS semantiques pour une personnalisation facile

Références