https://neobrutalism.com/nl/blocks/sidebar/collapsible-dashboard-sidebar
Inklapbare sidebar
Zijbalk · Pro broncode
Een applicatiesidebar die drie taken tegelijk vervult: een volledig paneel van 256px op desktop, een iconenrail van 64px als je hem inklapt, en een off-canvas lade op mobiel met een gedimde achtergrond. Hij draagt een merkregel, een profielblok met een rolbadge, zes navigatie-items met een ongelezenteller, en een uitlogactie vastgezet onderaan. Inklappen verbergt de labels visueel maar houdt ze voor schermlezers, zodat de rail nooit een rij ongelabelde iconen wordt. Elke kleur is een themetoken, dus het volgt je palet in licht en donker zonder aanpassingen.
Zijbalk
Inklapbare sidebarLive-voorbeeld openen
- Hero's, prijzen & auth
- Elk breekpunt vooraf bekijken
- Kopieer de brontekst
- MCP klaar voor installatie
- Radix · Base UI · React Aria
- 158 kant-en-klare blokken
- Paginadelen die worden geleverd
- Dashboards en marketing
- Pro ontgrendelt de code
- Drop-in-indelingen
Geliefd bij developers, designers
& makers
Ik stuitte op je UI-kit en pakte hem meteen. Onder de indruk: nieuw, actief onderhouden en constant verbeterd. Geweldig werk! 🤘
Ziv Reich, Softwareontwikkelaar Ik wilde even zeggen: geweldig werk aan neobrutalism.com. Ik vind het echt top. Ik ben waardeloos in design, dus dit was perfect. Ik heb het op mijn persoonlijke site gebruikt.
Paul Bratslavsky, Maker van Coding With Paul Eindelijk mijn persoonlijke website opnieuw gebouwd met Neobrutalism.com — leuke bibliotheek, super makkelijk om te starten!
Cameron Blackwood, Contentmaker Neobrutalism.com is een van mijn favoriete UI-componentbibliotheken in retrostijl — componenten die echt shippen.
Zhengyang Hou, Indie hacker een van mijn favoriete ui-bibliotheken voor het web. mooi werk — hoop dat het groots wordt.
Taseen Tanvir, Oprichter & designer Net Neobrutalism.com Pro geprobeerd — een UI-kit die niet op al het andere lijkt. De neobrutalistische blokken 🔥 maakten rare, speelse layouts sneller prototypen.
Nitesh Padghan, Ghostwriter Prachtig landingpage-ontwerp met perfecte balans en flow. Het kleurenpalet gecombineerd met de animaties levert een uitzonderlijke gebruikerservaring op.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Ik ben echt onder de indruk van het ontwerp dat ze hebben opgeleverd. Het eindproduct kwam precies overeen met wat ik voor ogen had.
Desmond, Medeoprichter @ VectorlabsVentures Als agency-eigenaar besteed ik meestal weken aan het perfectioneren van landingpage-layouts voor klanten. Met Neobrutalism.com plug ik een template in, pas de copy aan, en ik ben klaar om te shippen.
Duke Opoku Amankwah, Oprichter @ Midas De templates zijn niet alleen visueel indrukwekkend, maar ook ongelooflijk goed gestructureerd. Ze hebben ons weken ontwikkeltijd bespaard.
Abiola Braimah, Developer @ Studio IX Uitstekende kwaliteit en oog voor detail. Het responsive design werkt feilloos op alle apparaten.
Acromond X., Medeoprichter @ VectorlabsVentures Deze templates in onze workflow integreren heeft onze ontwikkelcyclus sterk verkort. Uitstekend werk.
Raquib S., Backend-ontwikkelaar Deze templates zijn onze go-to-resource geworden. De code is schoon, goed gedocumenteerd en makkelijk aan te passen.
Hallic M., Developer @ AtlasLabs Neobrutalism.com-templates raken de perfecte balans tussen esthetiek en functionaliteit. Een echte game-changer voor onze projecten.
Ibrahim S., Frontend Lead @ ScaleUp Uitstekende support en premium templates. De ROI van deze templates is fenomenaal.
Kevin K., CEO @ WebCraft Neobrutalism.com-templates hebben compleet veranderd hoe we nieuwe klantprojecten aanpakken. De codekwaliteit is uitzonderlijk en de designs zijn echt world-class.
Danny G., Oprichter van DevStack Ik heb veel templatebibliotheken gebruikt, maar Neobrutalism.com valt op door aandacht voor performance-optimalisatie en schone code-architectuur.
Ian D., CTO bij Wavelength De animaties en micro-interacties in deze templates zijn absoluut verbluffend. Beste investering voor ons designteam.
Ben S., Lead Designer bij PixelPerfect Als niet-technische oprichter hielpen Neobrutalism.com-templates ons om onze MVP in recordtijd te lanceren zonder in te leveren op designkwaliteit. Onze investeerders waren onder de indruk.
Matthew I., Startup-oprichter Ik waardeer hoe modulair en goed gedocumenteerd deze componenten zijn. We konden stukken van verschillende templates naadloos mixen.
Garrett P., Frontend Lead bij TechFusion De ROI van Neobrutalism.com-templates is ongelooflijk. We hebben de ontwikkeltijd drastisch verkort en leveren tegelijk betere sites aan onze klanten.
Xavier C., Agency-eigenaar
Veel gestelde
vragen
Hoe het Inklapbare sidebar-blok in elkaar zit, wat je kunt veranderen en wanneer je het in plaats van de andere lay-outs hier moet gebruiken.
Een app. Het gaat uit van een ingelogde gebruiker, een huidige route, en een blijvende schil om je paginainhoud — daarom heeft het een profielblok en een uitlogactie in plaats van een logo en een aanmeldknop. Gebruik voor een publieke site de navbar-categorie: de top-nav-blokken zijn horizontaal, hebben geen accountstatus, en zijn gemaakt voor een header in plaats van een schil. Dit is het enige sidebarblok, dus er is geen smallere of bredere variant om mee te vergelijken.
Hij gaat van w-64 naar w-16 en elk tekstlabel wordt sr-only in plaats van verwijderd, dus de iconen behouden toegankelijke namen en elke rij houdt een title-attribuut voor een tooltip bij hover. Het profiel behoudt de avatar en verbergt naam en rol achter een visueel verborgen regel. De ongelezenbadge op Notifications wordt vervangen door een verborgen zin 3 unread, want een numerieke badge die in een rail van 64px wordt geperst blijft niet leesbaar.
Verander de constante activeHref bovenaan het bestand, of vervang die in een Next.js-app door const activeHref = usePathname(). De bijpassende rij krijgt zowel aria-current op page als de gele vulling, dus de status wordt aangekondigd in plaats van alleen getoond — kleur alleen zou onzichtbaar blijven voor een schermlezer en voor iedereen die het verschil niet kan zien. De rij krijgt ook een zichtbare rand, een tweede niet-kleurgebonden signaal.
Alles komt uit de navItems-array: elk item is een id, een label, een lucide-iconcomponent, een href, en een optionele count. Het array herordenen herordent de sidebar, en een count aan een willekeurig item toevoegen rendert de badge op die rij. Zo'n acht items is de praktische grens voordat de lijst zijn eigen scroll nodig heeft — de nav is al flex-1 met overflow-y-auto, dus hij scrolt in plaats van de uitlograaij van onderaan te duwen.
Omdat een div met een onClick-handler niet met het toetsenbord bereikt kan worden, dus op een telefoongroot viewport zou de lade geopend kunnen worden en nooit meer gesloten zonder muis. De achtergrond is een echte knop met aria-label Close menu, en Escape sluit de lade ook. De toggle zelf draagt aria-expanded en aria-controls die naar de sidebar-id wijzen, zodat de status wordt blootgesteld in plaats van geïmpliceerd door de iconwissel.
Hem wegschuiven met -translate-x-full verplaatst hem uit beeld maar laat elke link in de tab-volgorde staan, dus een toetsenbordgebruiker op mobiel tabt langs zes onzichtbare bestemmingen voordat hij de pagina bereikt. max-md:invisible toevoegen haalt hem onder het md-breakpoint uit de tab-volgorde met behoud van de schuifbeweging, want visibility gaat op de weg naar buiten pas aan het eind van de animatie over en op de weg naar binnen meteen. Boven md is de lade altijd zichtbaar, dus de klasse is dan nooit van toepassing.