Layout con la sidebar shadcn

Risposta breve: npx shadcn@latest add sidebar installa un set di componenti, non un file unico. Avvolgi sidebar e contenuto in SidebarProvider, metti il contenuto in SidebarInset e leggi il cookie sidebar_state sul server per evitare il salto al primo paint.

La struttura minima

Il layout è composto da tre strati: il provider che tiene lo stato, la sidebar che disegna il menu, l'inset che occupa lo spazio rimasto. Se il provider manca, useSidebar() lancia un errore esplicito: è il primo segnale da controllare quando la sidebar non si chiude.

// app/layout.tsx
import { cookies } from "next/headers";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/app-sidebar";

export default async function Layout({ children }: { children: React.ReactNode }) {
  const cookieStore = await cookies();
  const defaultOpen = cookieStore.get("sidebar_state")?.value !== "false";

  return (
    
      
      
        
          
          Dashboard
        
        {children}
      
    
  );
}

Il provider scrive il cookie sidebar_state quando lo stato cambia. Leggerlo sul server e passarlo a defaultOpen è ciò che evita il salto: senza, il primo render usa il valore predefinito e la sidebar si sposta dopo l'idratazione.

La sidebar, in breve

// components/app-sidebar.tsx
import { Home, Settings } from "lucide-react";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";

const items = [
  { title: "Panoramica", href: "/", icon: Home },
  { title: "Impostazioni", href: "/settings", icon: Settings },
];

export function AppSidebar() {
  return (
    
      
        
          Applicazione
          
            
              {items.map((item) => (
                
                  
                    
                      
                      {item.title}
                    
                  
                
              ))}
            
          
        
      
    
  );
}

Le tre varianti

La larghezza non è un numero fisso nel CSS: il provider espone --sidebar-width e --sidebar-width-icon, e la variante icon usa la seconda. Cambiarle in :root è sufficiente, senza toccare i componenti. Il metodo è lo stesso descritto in come tematizzare shadcn/ui.

Accessibilità e mobile

Sotto il breakpoint md la sidebar diventa uno Sheet: si apre sopra il contenuto, con un pulsante di chiusura. Due dettagli sfuggono spesso. Il primo: con la variante icon le etichette spariscono, quindi tooltip non basta e serve un testo per lo screen reader dentro il link. Il secondo: la scorciatoia Ctrl+B o ⌘B è già registrata dal provider; non aggiungerne una seconda.

Limite dichiarato

La sidebar usa position: fixed e h-svh. Un antenato con transform, filter o overflow: hidden la ancora a quel contenitore invece che alla finestra, e il risultato è una barra che scorre con la pagina. Il catalogo, misurato il 1 novembre 2026, contiene 22 blocchi in categoria sidebar: quasi tutti presuppongono un layout a piena altezza, non una pagina dentro una card.

Dove continuare

Nel catalogo trovi un blocco sidebar con anteprima, la categoria sidebar e il record del componente sidebar. Per il tema leggi che cosa è shadcn/ui e come tematizzare shadcn/ui; la selezione dei blocchi è in migliori sidebar blocks 2026.