https://neobrutalism.com/uk/blocks/sidebar/collapsible-dashboard-sidebar
Бічна панель, що згортається
Бічна панель · Вихідник Pro
Панель застосунку, яка робить три роботи одразу: повноцінна панель на 256px на десктопі, смуга з іконками на 64px у згорнутому стані та висувна панель із затемненим тлом на мобільному. Вона містить рядок бренду, блок профілю з бейджем ролі, шість пунктів навігації з лічильником непрочитаного та кнопку виходу, закріплену внизу. Згортання ховає підписи візуально, але лишає їх для читачів екрана, тож смуга ніколи не перетворюється на ряд безіменних іконок. Кожен колір — це токен теми, тож панель слідує вашій палітрі у світлій і темній без правок.
Бічна панель
Бічна панель, що згортаєтьсяВідкрити живий прев'ю
- Hero, ціни та auth
- Перегляд кожної точки зупину
- Скопіювати вихідний код
- MCP готовий до встановлення
- Radix · Base UI · React Aria
- 158 готові блоки
- Розділи сторінки, що відправляються
- Інформаційні панелі та маркетинг
- Pro розблоковує код
- Компоновки з можливістю вільного розміщення
Люблять розробники, дизайнери
і креатори
Натрапив на ваш UI-кіт і одразу забрав. Новий, активно підтримується і постійно вдосконалюється — чудова робота! 🤘
Ziv Reich, Розробник ПЗ Просто хочу сказати: neobrutalism.com — чудова робота. Справді подобається. З дизайном у мене біда, тож це просто порятунок. Поставив на свій особистий сайт.
Paul Bratslavsky, Автор каналу Coding With Paul Нарешті перезібрав свій особистий сайт на Neobrutalism.com — весела бібліотека, дуже легко почати!
Cameron Blackwood, Контент-креатор Neobrutalism.com — одна з моїх улюблених бібліотек UI-компонентів у ретростилі: компоненти, які справді можна ship’ити.
Zhengyang Hou, Індіхакер одна з моїх улюблених ui-бібліотек для вебу. класна робота, Аріф. сподіваюся, у проєкту все складеться на велике.
Taseen Tanvir, Засновник і дизайнер Спробував Neobrutalism.com Pro — UI-кіт, який не схожий на все інше. Необруталістичні блоки 🔥 прискорили прототипи дивних макетів.
Nitesh Padghan, Гострайтер Чудовий дизайн лендингу з ідеальним балансом і ритмом. Кольорова палітра разом з анімаціями створює винятковий користувацький досвід.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Я справді вражений дизайном, який вони здали. Фінальний продукт точно збігся з тим, що я уявляв.
Desmond, Співзасновник @ VectorlabsVentures Як власник агенції я зазвичай витрачаю тижні на доведення макетів лендингів для клієнтів. З Neobrutalism.com я підключаю шаблон, правля copy — і готовий до релізу.
Duke Opoku Amankwah, Засновник @ Midas Шаблони не лише візуально сильні, а й надзвичайно добре структуровані. Заощадили нам тижні розробки.
Abiola Braimah, Розробник @ Studio IX Виняткова якість і увага до деталей. Адаптивний дизайн бездоганно працює на всіх пристроях.
Acromond X., Співзасновник @ VectorlabsVentures Інтеграція цих шаблонів у наш workflow помітно скоротила цикл розробки. Відмінна робота.
Raquib S., Backend-розробник Ці шаблони стали нашим основним ресурсом. Код чистий, добре задокументований і легко кастомізується.
Hallic M., Розробник @ AtlasLabs Шаблони Neobrutalism.com знаходять ідеальний баланс між естетикою та функціональністю. Справжній game-changer для наших проєктів.
Ibrahim S., Frontend Lead @ ScaleUp Відмінна підтримка і шаблони преміум-якості. ROI цих шаблонів феноменальний.
Kevin K., CEO @ WebCraft Шаблони Neobrutalism.com повністю змінили наш підхід до клієнтських проєктів. Якість коду виняткова, а дизайни — справді world-class.
Danny G., Засновник DevStack Я користувався багатьма бібліотеками шаблонів, але Neobrutalism.com вирізняється увагою до оптимізації продуктивності й чистої архітектури коду.
Ian D., CTO у Wavelength Анімації та мікроінтеракції в цих шаблонах абсолютно приголомшливі. Найкраща інвестиція для нашої design-команди.
Ben S., Lead Designer у PixelPerfect Як нетехнічний засновник, шаблони Neobrutalism.com допомогли нам запустити MVP в рекордні терміни без компромісів щодо якості дизайну. Наші інвестори були в захваті.
Matthew I., Засновник стартапу Мені подобається, наскільки модульні й добре задокументовані ці компоненти. Ми без тертя змішуємо частини з різних шаблонів.
Garrett P., Frontend Lead у TechFusion ROI шаблонів Neobrutalism.com неймовірний. Ми різко скоротили час розробки й при цьому віддаємо клієнтам сайти вищої якості.
Xavier C., Власник агенції
Часто задавані
запитання
Як зібрано блок Бічна панель, що згортається, що ви можете змінити й коли його використовувати замість інших макетів.
Для застосунку. Панель припускає, що користувач увійшов, що є поточний маршрут і що навколо контенту сторінки лишається постійна оболонка, — саме тому тут блок профілю та вихід, а не логотип і кнопка реєстрації. Для публічного сайту беріть категорію navbar: верхні панелі горизонтальні, не знають про стан акаунта і створені для шапки, а не для оболонки. Це єдиний блок бічної панелі, тож вужчого чи ширшого варіанта для порівняння немає.
Вона переходить із w-64 у w-16, і кожен текстовий підпис стає sr-only, а не видаляється, тож іконки зберігають доступні назви, а кожен рядок — атрибут title для підказки при наведенні. Профіль лишає аватар і ховає ім'я та роль у візуально прихований рядок. Бейдж непрочитаного на Notifications замінює прихована фраза 3 unread, бо числовий бейдж, стиснутий у смугу на 64px, перестає бути розбірливим.
Змініть константу activeHref на початку файлу або, у застосунку на Next.js, замініть її на const activeHref = usePathname(). Відповідний рядок отримує aria-current зі значенням page на додачу до жовтої заливки, тож стан озвучується, а не лише показується — самим кольором він лишався б невидимим і для читача екрана, і для будь-кого, хто його не розрізняє. Рядок також отримує видиму рамку — другу, некольорову підказку.
Усе береться з масиву navItems: кожен запис — це id, підпис, компонент іконки з lucide, href і необов'язковий count. Перестановка масиву переставляє пункти, а доданий до будь-якого запису count малює бейдж у цьому рядку. Приблизно вісім пунктів — практична межа, після якої списку потрібна власна прокрутка: навігація вже має flex-1 і overflow-y-auto, тож вона прокручується, а не виштовхує рядок виходу за нижній край.
Тому що до div з обробником onClick неможливо дістатися з клавіатури, тож на екрані розміром із телефон панель можна було б відкрити й ніколи не закрити без миші. Затемнення — це справжня кнопка з aria-label Close menu, а ще панель закривається клавішею Escape. Сам перемикач має aria-expanded і aria-controls з id панелі, тож його стан оприлюднений, а не лише натякається зміною іконки.
Виїзд через -translate-x-full виносить її за межі екрана, але лишає кожне посилання в порядку обходу табуляцією, тож користувач клавіатури на мобільному проходить шість невидимих пунктів, перш ніж дістатися сторінки. Додавання max-md:invisible прибирає її з порядку обходу нижче брейкпоінта md і зберігає рух, бо visibility перемикається наприкінці анімації на виході й одразу на вході. Вище md панель завжди видима, тож клас не спрацьовує.