https://neobrutalism.com/pl/blocks/sidebar/collapsible-dashboard-sidebar
Zwijany sidebar
Panel boczny · Kod źródłowy Pro
Sidebar aplikacji, który wykonuje trzy zadania naraz: pełny panel 256px na desktopie, 64px pasek ikon po zwinięciu i wysuwaną szufladę na mobile z przyciemnionym tłem. Zawiera wiersz z marką, blok profilu z odznaką roli, sześć pozycji nawigacji z licznikiem nieprzeczytanych oraz akcję wylogowania przypiętą u dołu. Zwinięcie ukrywa etykiety wizualnie, ale zachowuje je dla czytników ekranu, więc pasek nigdy nie zmienia się w rząd bezimiennych ikon. Każdy kolor to token motywu, więc sidebar podąża za paletą w jasnym i ciemnym trybie bez żadnych zmian.
Panel boczny
Zwijany sidebarOtwórz podgląd na żywo
- Hero, cenniki i auth
- Podgląd każdego punktu przerwania
- Skopiuj kod źródłowy
- MCP gotowy do instalacji
- Radix · Base UI · React Aria
- 158 gotowe bloki
- Sekcje strony, które są dostarczane
- Panele kontrolne i marketing
- Pro odblokowuje kod
- Układy typu „drop-in”
Uwielbiane przez deweloperów, projektantów
i twórców
Natknąłem się na twój UI kit i od razu go wziąłem. Projekt nowy, aktywnie rozwijany i wciąż ulepszany — kawał dobrej roboty! 🤘
Ziv Reich, Programista Chciałem tylko powiedzieć: świetna robota z neobrutalism.com. Naprawdę mi się podoba. Jestem beznadziejny w projektowaniu, więc to był strzał w dziesiątkę. Użyłem tego na swojej prywatnej stronie.
Paul Bratslavsky, Twórca Coding With Paul W końcu przebudowałem swoją prywatną stronę z Neobrutalism.com — fajna biblioteka, super łatwy start!
Cameron Blackwood, Twórca treści Neobrutalism.com to jedna z moich ulubionych bibliotek komponentów UI w stylu retro — komponenty, które naprawdę się shipuje.
Zhengyang Hou, Indie hacker jedna z moich ulubionych bibliotek ui do weba. świetna robota — oby projekt szedł coraz dalej.
Taseen Tanvir, Założyciel i projektant Właśnie wypróbowałem Neobrutalism.com Pro — UI kit, który nie wygląda jak wszystko inne. Neobrutalistyczne bloki 🔥 przyspieszyły prototypowanie dziwnych układów.
Nitesh Padghan, Ghostwriter Piękny design landing page z idealną równowagą i flow. Paleta kolorów w połączeniu z animacjami tworzy wyjątkowe doświadczenie użytkownika.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Jestem naprawdę pod wrażeniem designu, który dostarczyli. Finalny produkt dokładnie odpowiadał temu, co sobie wyobrażałem.
Desmond, Współzałożyciel @ VectorlabsVentures Jako właściciel agencji zwykle spędzam tygodnie na dopracowywaniu layoutów landingów dla klientów. Z Neobrutalism.com wkładam szablon, poprawiam copy i jestem gotowy do publikacji.
Duke Opoku Amankwah, Założyciel @ Midas Szablony nie tylko wyglądają rewelacyjnie — są też niesamowicie dobrze ustrukturyzowane. Oszczędziły nam tygodnie pracy deweloperskiej.
Abiola Braimah, Developer @ Studio IX Wybitna jakość i dbałość o detale. Responsywny design działa bez zarzutu na wszystkich urządzeniach.
Acromond X., Współzałożyciel @ VectorlabsVentures Włączenie tych szablonów do naszego workflow znacząco skróciło cykl rozwoju. Świetna robota.
Raquib S., Backend developer Te szablony stały się naszym podstawowym źródłem. Kod jest czysty, dobrze udokumentowany i łatwy do dostosowania.
Hallic M., Developer @ AtlasLabs Szablony Neobrutalism.com trafiają w idealną równowagę między estetyką a funkcjonalnością. Prawdziwy game-changer dla naszych projektów.
Ibrahim S., Frontend Lead @ ScaleUp Wybitne wsparcie i szablony premium. ROI tych szablonów jest fenomenalne.
Kevin K., CEO @ WebCraft Szablony Neobrutalism.com całkowicie zmieniły sposób, w jaki podchodzimy do projektów klientów. Jakość kodu jest wyjątkowa, a designy naprawdę world-class.
Danny G., Założyciel DevStack Korzystałem z wielu bibliotek szablonów, ale Neobrutalism.com wyróżnia się dbałością o optymalizację wydajności i czystą architekturę kodu.
Ian D., CTO w Wavelength Animacje i mikrointerakcje w tych szablonach są absolutnie oszałamiające. Najlepsza inwestycja dla naszego zespołu designu.
Ben S., Lead Designer w PixelPerfect Jako nietechniczny founder, szablony Neobrutalism.com pomogły nam uruchomić MVP w rekordowym czasie bez kompromisów w jakości designu. Nasi inwestorzy byli zachwyceni.
Matthew I., Założyciel startupu Doceniam, jak modularne i dobrze udokumentowane są te komponenty. Bez tarcia mieszamy elementy z różnych szablonów.
Garrett P., Frontend Lead w TechFusion ROI szablonów Neobrutalism.com jest niesamowite. Dramatycznie skróciliśmy czas developmentu, dostarczając klientom strony wyższej jakości.
Xavier C., Właściciel agencji
Najczęściej zadawane
pytania
Jak zbudowany jest blok Zwijany sidebar, co można zmienić i kiedy go używać zamiast innych układów tutaj.
Do aplikacji. Zakłada zalogowanego użytkownika, bieżącą trasę i trwałą powłokę wokół treści strony — dlatego ma blok profilu i akcję wylogowania zamiast logo i przycisku rejestracji. Do publicznej strony użyj zamiast tego kategorii navbar: bloki górnej nawigacji są poziome, nie mają stanu konta i są zbudowane do nagłówka, a nie do powłoki. To jedyny blok typu sidebar, więc nie ma węższego ani szerszego wariantu do porównania.
Przechodzi z w-64 do w-16, a każda etykieta tekstowa staje się sr-only zamiast zostać usunięta, więc ikony nadal mają dostępne nazwy, a każdy wiersz zachowuje atrybut title dla podpowiedzi po najechaniu. Profil zachowuje avatar i ukrywa imię oraz rolę za wizualnie ukrytą linią. Odznaka nieprzeczytanych przy Notifications zastępowana jest ukrytą frazą 3 unread, ponieważ liczbowa odznaka skurczona do paska 64px przestaje być czytelna.
Zmień stałą activeHref na górze pliku albo w aplikacji Next.js zastąp ją const activeHref = usePathname(). Pasujący wiersz otrzymuje aria-current ustawione na page oraz żółte wypełnienie, więc stan jest ogłaszany, a nie tylko pokazywany — sam kolor byłby niewidoczny dla czytnika ekranu i dla osoby, która go nie rozróżnia. Wiersz zyskuje też widoczny border, co jest drugim, niekolorowym sygnałem.
Wszystko pochodzi z tablicy navItems: każdy wpis to id, etykieta, komponent ikony lucide, href i opcjonalny licznik. Zmiana kolejności w tablicy zmienia kolejność w sidebarze, a dodanie count do dowolnego wpisu renderuje odznakę w tym wierszu. Około ośmiu pozycji to praktyczny limit, zanim lista będzie potrzebować własnego przewijania — nav już jest flex-1 z overflow-y-auto, więc przewija się zamiast wypychać wiersz wylogowania poza dół.
Ponieważ div z obsługą onClick jest nieosiągalny z klawiatury, więc na ekranie wielkości telefonu szuflada mogłaby zostać otwarta i nigdy zamknięta bez myszy. Tło to prawdziwy przycisk z aria-label Close menu, a Escape również zamyka szufladę. Sam przełącznik ma aria-expanded i aria-controls wskazujące na id sidebaru, więc jego stan jest ujawniony, a nie tylko domyślany na podstawie zmiany ikony.
Odsunięcie jej przez -translate-x-full przenosi ją poza ekran, ale zostawia każdy link w kolejności tabulacji, więc użytkownik klawiatury na mobile przechodzi przez sześć niewidocznych celów, zanim dotrze do strony. Dodanie max-md:invisible wyjmuje ją z kolejności tabulacji poniżej breakpointu md, zachowując przesunięcie, ponieważ visibility przełącza się na koniec animacji przy wyjściu i natychmiast przy wejściu. Powyżej md szuflada jest zawsze widoczna, więc ta klasa nigdy się nie stosuje.