https://neobrutalism.com/it/blocks/sidebar/collapsible-dashboard-sidebar
Sidebar comprimibile
Sidebar · Codice sorgente Pro
Una sidebar applicativa che svolge tre lavori insieme: un pannello completo di 256px su desktop, una barra a icone di 64px quando la comprimi, e un cassetto off-canvas su mobile con uno sfondo attenuato. Porta una riga brand, un blocco profilo con un badge di ruolo, sei voci di navigazione con un conteggio non letti, e un'azione di disconnessione fissata in fondo. Comprimere nasconde visivamente le etichette ma le mantiene per gli screen reader, così la barra non diventa mai una riga di icone senza nome. Ogni colore è un token del tema, quindi segue la tua palette in modalità chiara e scura senza modifiche.
Sidebar
Sidebar comprimibileApri anteprima in diretta
- Hero, prezzi e auth
- Visualizza in anteprima ogni punto di interruzione
- Copia il codice sorgente
- MCP pronto per l'installazione
- Radix · Base UI · React Aria
- 158 blocchi prefabbricati
- Sezioni della pagina incluse nella spedizione
- Dashboard e marketing
- Pro sblocca il codice
- Layout a inserimento
Amato da dev, designer
e creator
Mi sono imbattuto nel tuo kit UI e l’ho preso subito. Colpito nel vedere che è nuovo, mantenuto attivamente e migliorato di continuo. Lavoro pazzesco! 🤘
Ziv Reich, Sviluppatore software Volevo solo dire: ottimo lavoro con neobrutalism.com. Mi piace davvero. Sono negato con il design, quindi per me è stato fantastico. L’ho usato sul mio sito personale.
Paul Bratslavsky, Creatore di Coding With Paul Finalmente ho rifatto il mio sito personale con Neobrutalism.com — libreria divertente e semplicissima da iniziare!
Cameron Blackwood, Content creator Neobrutalism.com è una delle mie librerie di componenti UI retro preferite — componenti che si shippano davvero.
Zhengyang Hou, Indie hacker una delle mie librerie ui preferite per il web. ottimo lavoro — spero che vada alla grande.
Taseen Tanvir, Founder e designer Ho appena provato Neobrutalism.com Pro — un kit UI che non somiglia a tutto il resto. I blocchi neobrutalisti 🔥 hanno reso più veloce prototipare layout strani e divertenti.
Nitesh Padghan, Ghostwriter Design di landing page bellissimo, con equilibrio e flusso perfetti. La palette di colori unita alle animazioni crea un’esperienza utente eccezionale.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Sono davvero impressionato dal design che hanno consegnato. Il prodotto finale corrisponde esattamente a quello che avevo in mente.
Desmond, Co-fondatore @ VectorlabsVentures Come titolare di agenzia di solito passo settimane a rifinire i layout delle landing per i clienti. Con Neobrutalism.com inserisco un template, regolo il copy e sono pronto a pubblicare.
Duke Opoku Amankwah, Fondatore @ Midas I template non sono solo splendidi visivamente: sono anche strutturati benissimo. Ci hanno fatto risparmiare settimane di sviluppo.
Abiola Braimah, Sviluppatore @ Studio IX Qualità eccellente e attenzione ai dettagli. Il design responsive funziona alla perfezione su tutti i dispositivi.
Acromond X., Co-fondatore @ VectorlabsVentures Integrare questi template nel nostro workflow ha ridotto in modo significativo il ciclo di sviluppo. Ottimo lavoro.
Raquib S., Sviluppatore backend Questi template sono diventati la nostra risorsa di riferimento. Il codice è pulito, ben documentato e facilmente personalizzabile.
Hallic M., Sviluppatore @ AtlasLabs I template di Neobrutalism.com trovano l’equilibrio perfetto tra estetica e funzionalità. Un vero game-changer per i nostri progetti.
Ibrahim S., Frontend Lead @ ScaleUp Supporto eccellente e template di qualità premium. Il ROI di questi template è fenomenale.
Kevin K., CEO @ WebCraft I template di Neobrutalism.com hanno trasformato del tutto il modo in cui affrontiamo i progetti clienti. La qualità del codice è eccezionale e i design sono di prim’ordine.
Danny G., Fondatore di DevStack Ho usato molte librerie di template, ma Neobrutalism.com si distingue per l’attenzione all’ottimizzazione delle performance e a un’architettura di codice pulita.
Ian D., CTO di Wavelength Le animazioni e le micro-interazioni di questi template sono assolutamente stupefacenti. Il miglior investimento per il nostro team design.
Ben S., Lead Designer di PixelPerfect Come founder non tecnico, i template di Neobrutalism.com ci hanno aiutato a lanciare l’MVP in tempi record senza scendere a compromessi sulla qualità del design. I nostri investitori sono rimasti a bocca aperta.
Matthew I., Fondatore di startup Apprezzo quanto siano modulari e ben documentati questi componenti. Abbiamo potuto mischiare pezzi di template diversi senza attriti.
Garrett P., Frontend Lead di TechFusion Il ROI dei template di Neobrutalism.com è incredibile. Abbiamo ridotto drasticamente i tempi di sviluppo consegnando siti di qualità superiore ai clienti.
Xavier C., Titolare di agenzia
Domande
frequenti
Come è composto il blocco Sidebar comprimibile, cosa puoi modificare e quando usarlo al posto degli altri layout qui.
Un'app. Presuppone un utente autenticato, una rotta corrente e un guscio persistente attorno al contenuto della tua pagina, ed è per questo che ha un blocco profilo e un'azione di disconnessione invece di un logo e un pulsante di iscrizione. Per un sito pubblico usa invece la categoria navbar: i blocchi top-nav sono orizzontali, non hanno stato account, e sono costruiti per un'intestazione invece che per un guscio. Questo è l'unico blocco sidebar, quindi non c'è una variante più stretta o più larga con cui confrontarlo.
Passa da w-64 a w-16 e ogni etichetta di testo diventa sr-only invece di essere rimossa, quindi le icone hanno comunque nomi accessibili e ogni riga mantiene un attributo title per un tooltip al passaggio del mouse. Il profilo mantiene l'avatar e nasconde nome e ruolo dietro una riga nascosta visivamente. Il badge non letti su Notifiche viene sostituito da una frase nascosta 3 non letti, perché un badge numerico rimpicciolito in una barra da 64px smette di essere leggibile.
Cambia la costante activeHref in cima al file, oppure in un'app Next.js sostituiscila con const activeHref = usePathname(). La riga corrispondente ottiene aria-current impostato a page oltre al riempimento giallo, così lo stato è annunciato oltre che mostrato: il colore da solo lo renderebbe invisibile a uno screen reader e a chiunque non riesca a distinguerlo. La riga ottiene anche un bordo visibile, un secondo segnale non basato sul colore.
Tutto proviene dall'array navItems: ogni voce è un id, un'etichetta, un componente icona lucide, un href, e un count opzionale. Riordinare l'array riordina la sidebar, e aggiungere un count a qualsiasi voce disegna il badge su quella riga. Circa otto voci è il limite pratico prima che l'elenco abbia bisogno del proprio scroll: il nav è già flex-1 con overflow-y-auto, quindi scorre invece di spingere la riga di disconnessione fuori dal fondo.
Perché un div con un gestore onClick non può essere raggiunto con la tastiera, quindi su un viewport da telefono il cassetto potrebbe aprirsi e non chiudersi mai senza un mouse. Lo sfondo è un vero pulsante con aria-label Chiudi menu, e Escape chiude anche il cassetto. Il toggle stesso porta aria-expanded e aria-controls che puntano all'id della sidebar, quindi il suo stato è esposto invece che implicito nel cambio di icona.
Farlo scivolare fuori con -translate-x-full lo sposta fuori schermo ma lascia ogni link nell'ordine di tabulazione, quindi un utente da tastiera su mobile passa per sei destinazioni invisibili prima di raggiungere la pagina. Aggiungere max-md:invisible lo toglie dall'ordine di tabulazione sotto il breakpoint md mantenendo lo scorrimento, perché visibility transita alla fine dell'animazione in uscita e immediatamente in entrata. Sopra md il cassetto è sempre visibile, quindi la classe non si applica mai.