# A layout with the shadcn sidebar

SidebarProvider wraps the sidebar and the content, a sidebar_state cookie prevents the opening jump, and the icon variant needs tooltips and hidden text.

> Page: https://ui.eneawork.it/blog/shadcn-sidebar-layout
> Markdown: https://ui.eneawork.it/blog/shadcn-sidebar-layout.md

*2026-11-01*

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.

Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi, 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. 22 blocchi su 1.556 sono nella categoria sidebar e 25 hanno «sidebar» nell'id, contati da data/blocks.json lo stesso giorno.

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

## FAQ

### Perché useSidebar lancia un errore?

Perché il componente che lo chiama non sta dentro SidebarProvider. Il provider deve avvolgere sia la sidebar sia SidebarInset, non solo uno dei due.

### Come mantengo la sidebar aperta tra una visita e l'altra?

Il provider scrive già il cookie sidebar_state. Leggilo nel layout server e passalo a defaultOpen; senza questo passaggio la sidebar parte dal valore predefinito e si sposta dopo l'idratazione.

### Perché la sidebar scorre con la pagina?

Perché un antenato ha transform, filter o overflow: hidden: position fixed si riferisce a quel contenitore, non alla finestra. Rimuovi la proprietà dal wrapper e la sidebar torna fissa.

### Come cambio la larghezza della sidebar?

Modifica --sidebar-width per lo stato aperto e --sidebar-width-icon per la variante icon. Sono variabili CSS esposte dal provider, quindi non serve toccare i componenti.

### La sidebar funziona su mobile?

Sì. Sotto il breakpoint md diventa uno Sheet con overlay e pulsante di chiusura. Con la variante icon controlla che ogni voce abbia un'etichetta accessibile, perché il testo visibile sparisce.