Дашборд с боковым меню

1 августа 2026

Верстает адаптивный дашборд с раскрывающимся сайдбаром на HTML, CSS и JS с учётом доступности и мобильной версии.

Описание

UI/UXБесплатно

Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.

дашборд
сайдбар
HTML/CSS
адаптив

Название

Дашборд с боковым меню

Категория

UI/UX

Источник

awesome-chatgpt-prompts — «Sidebar Dashboard Design» · CC0-1.0

Где работает

ChatGPT, Claude и другие ИИ-ассистенты

Объём

18 строк · 149 слов · 1 158 символов

Переменные

Значения сразу появятся в превью, коде и при копировании.

[например: панель управления интернет-магазином]

[список разделов и подразделов]

[чистые HTML5 + CSS3 + JS / React + Tailwind]

[цвета, шрифт, светлая/тёмная тема]

Как использовать

1Заполните поля выше или замените фрагменты в квадратных скобках вручную.
2Скопируйте промпт — он попадёт в буфер обмена целиком.
3Вставьте его в чат с ИИ: ChatGPT, Claude или любой другой ассистент.
4Уточняйте ответ короткими репликами, не переписывая промпт заново.

Что внутри

Ты — фронтенд-разработчик. Сделай интерфейс дашборда с боковой панелью навигации: современный, удобный и доступный.

Назначение дашборда: [например: панель управления интернет-магазином]
Разделы меню: [список разделов и подразделов]
Стек: [чистые HTML5 + CSS3 + JS / React + Tailwind]
Бренд: [цвета, шрифт, светлая/тёмная тема]

Требования:
1. Адаптивная сетка: сайдбар + шапка + контентная область.
2. Сайдбар со сворачиваемыми группами, свёрнутый режим «только иконки» на планшете и выезжающая панель с оверлеем на мобильном.
3. Активный пункт подсвечен, состояние сворачивания запоминается.
4. Динамическое обновление контента при переключении разделов без перезагрузки.
5. Доступность: навигация `nav` с `aria-label`, кнопки раскрытия с `aria-expanded`, управление с клавиатуры, видимый фокус, закрытие мобильного меню по Esc.
6. Кроссбраузерность и отсутствие горизонтального скролла на 320px.

Правила: чистый, организованный код, CSS-переменные для цветов и отступов, без внешних зависимостей, если стек не требует.

Формат ответа: краткое описание структуры, затем полный код файлов, затем список, как проверить поведение на мобильном и с клавиатуры.

```text
Ты — фронтенд-разработчик. Сделай интерфейс дашборда с боковой панелью навигации: современный, удобный и доступный.

Назначение дашборда: [например: панель управления интернет-магазином]
Разделы меню: [список разделов и подразделов]
Стек: [чистые HTML5 + CSS3 + JS / React + Tailwind]
Бренд: [цвета, шрифт, светлая/тёмная тема]

Требования:
1. Адаптивная сетка: сайдбар + шапка + контентная область.
2. Сайдбар со сворачиваемыми группами, свёрнутый режим «только иконки» на планшете и выезжающая панель с оверлеем на мобильном.
3. Активный пункт подсвечен, состояние сворачивания запоминается.
4. Динамическое обновление контента при переключении разделов без перезагрузки.
5. Доступность: навигация `nav` с `aria-label`, кнопки раскрытия с `aria-expanded`, управление с клавиатуры, видимый фокус, закрытие мобильного меню по Esc.
6. Кроссбраузерность и отсутствие горизонтального скролла на 320px.

Правила: чистый, организованный код, CSS-переменные для цветов и отступов, без внешних зависимостей, если стек не требует.

Формат ответа: краткое описание структуры, затем полный код файлов, затем список, как проверить поведение на мобильном и с клавиатуры.
```

{
  "messages": [
    {
      "role": "user",
      "content": "Ты — фронтенд-разработчик. Сделай интерфейс дашборда с боковой панелью навигации: современный, удобный и доступный.\n\nНазначение дашборда: [например: панель управления интернет-магазином]\nРазделы меню: [список разделов и подразделов]\nСтек: [чистые HTML5 + CSS3 + JS / React + Tailwind]\nБренд: [цвета, шрифт, светлая/тёмная тема]\n\nТребования:\n1. Адаптивная сетка: сайдбар + шапка + контентная область.\n2. Сайдбар со сворачиваемыми группами, свёрнутый режим «только иконки» на планшете и выезжающая панель с оверлеем на мобильном.\n3. Активный пункт подсвечен, состояние сворачивания запоминается.\n4. Динамическое обновление контента при переключении разделов без перезагрузки.\n5. Доступность: навигация `nav` с `aria-label`, кнопки раскрытия с `aria-expanded`, управление с клавиатуры, видимый фокус, закрытие мобильного меню по Esc.\n6. Кроссбраузерность и отсутствие горизонтального скролла на 320px.\n\nПравила: чистый, организованный код, CSS-переменные для цветов и отступов, без внешних зависимостей, если стек не требует.\n\nФормат ответа: краткое описание структуры, затем полный код файлов, затем список, как проверить поведение на мобильном и с клавиатуры."
    }
  ]
}

Действия

prompt.txt· заполнено 0 из 4

Ты — фронтенд-разработчик. Сделай интерфейс дашборда с боковой панелью навигации: современный, удобный и доступный.
Назначение дашборда: [например: панель управления интернет-магазином]
Разделы меню: [список разделов и подразделов]
Стек: [чистые HTML5 + CSS3 + JS / React + Tailwind]
Бренд: [цвета, шрифт, светлая/тёмная тема]
Требования:
1. Адаптивная сетка: сайдбар + шапка + контентная область.
2. Сайдбар со сворачиваемыми группами, свёрнутый режим «только иконки» на планшете и выезжающая панель с оверлеем на мобильном.
3. Активный пункт подсвечен, состояние сворачивания запоминается.
4. Динамическое обновление контента при переключении разделов без перезагрузки.
5. Доступность: навигация `nav` с `aria-label`, кнопки раскрытия с `aria-expanded`, управление с клавиатуры, видимый фокус, закрытие мобильного меню по Esc.
6. Кроссбраузерность и отсутствие горизонтального скролла на 320px.
Правила: чистый, организованный код, CSS-переменные для цветов и отступов, без внешних зависимостей, если стек не требует.
Формат ответа: краткое описание структуры, затем полный код файлов, затем список, как проверить поведение на мобильном и с клавиатуры.

Описание

UI/UXБесплатно

Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.

дашборд
сайдбар
HTML/CSS
адаптив

Название

Дашборд с боковым меню

Категория

UI/UX

Источник

awesome-chatgpt-prompts — «Sidebar Dashboard Design» · CC0-1.0

Где работает

ChatGPT, Claude и другие ИИ-ассистенты

Объём

18 строк · 149 слов · 1 158 символов

Переменные

Значения сразу появятся в превью, коде и при копировании.

[например: панель управления интернет-магазином]

[список разделов и подразделов]

[чистые HTML5 + CSS3 + JS / React + Tailwind]

[цвета, шрифт, светлая/тёмная тема]

Как использовать

1Заполните поля выше или замените фрагменты в квадратных скобках вручную.
2Скопируйте промпт — он попадёт в буфер обмена целиком.
3Вставьте его в чат с ИИ: ChatGPT, Claude или любой другой ассистент.
4Уточняйте ответ короткими репликами, не переписывая промпт заново.

Что внутри

Ты — фронтенд-разработчик. Сделай интерфейс дашборда с боковой панелью навигации: современный, удобный и доступный.

Назначение дашборда: [например: панель управления интернет-магазином]
Разделы меню: [список разделов и подразделов]
Стек: [чистые HTML5 + CSS3 + JS / React + Tailwind]
Бренд: [цвета, шрифт, светлая/тёмная тема]

Требования:
1. Адаптивная сетка: сайдбар + шапка + контентная область.
2. Сайдбар со сворачиваемыми группами, свёрнутый режим «только иконки» на планшете и выезжающая панель с оверлеем на мобильном.
3. Активный пункт подсвечен, состояние сворачивания запоминается.
4. Динамическое обновление контента при переключении разделов без перезагрузки.
5. Доступность: навигация `nav` с `aria-label`, кнопки раскрытия с `aria-expanded`, управление с клавиатуры, видимый фокус, закрытие мобильного меню по Esc.
6. Кроссбраузерность и отсутствие горизонтального скролла на 320px.

Правила: чистый, организованный код, CSS-переменные для цветов и отступов, без внешних зависимостей, если стек не требует.

Формат ответа: краткое описание структуры, затем полный код файлов, затем список, как проверить поведение на мобильном и с клавиатуры.

```text
Ты — фронтенд-разработчик. Сделай интерфейс дашборда с боковой панелью навигации: современный, удобный и доступный.

Назначение дашборда: [например: панель управления интернет-магазином]
Разделы меню: [список разделов и подразделов]
Стек: [чистые HTML5 + CSS3 + JS / React + Tailwind]
Бренд: [цвета, шрифт, светлая/тёмная тема]

Требования:
1. Адаптивная сетка: сайдбар + шапка + контентная область.
2. Сайдбар со сворачиваемыми группами, свёрнутый режим «только иконки» на планшете и выезжающая панель с оверлеем на мобильном.
3. Активный пункт подсвечен, состояние сворачивания запоминается.
4. Динамическое обновление контента при переключении разделов без перезагрузки.
5. Доступность: навигация `nav` с `aria-label`, кнопки раскрытия с `aria-expanded`, управление с клавиатуры, видимый фокус, закрытие мобильного меню по Esc.
6. Кроссбраузерность и отсутствие горизонтального скролла на 320px.

Правила: чистый, организованный код, CSS-переменные для цветов и отступов, без внешних зависимостей, если стек не требует.

Формат ответа: краткое описание структуры, затем полный код файлов, затем список, как проверить поведение на мобильном и с клавиатуры.
```

{
  "messages": [
    {
      "role": "user",
      "content": "Ты — фронтенд-разработчик. Сделай интерфейс дашборда с боковой панелью навигации: современный, удобный и доступный.\n\nНазначение дашборда: [например: панель управления интернет-магазином]\nРазделы меню: [список разделов и подразделов]\nСтек: [чистые HTML5 + CSS3 + JS / React + Tailwind]\nБренд: [цвета, шрифт, светлая/тёмная тема]\n\nТребования:\n1. Адаптивная сетка: сайдбар + шапка + контентная область.\n2. Сайдбар со сворачиваемыми группами, свёрнутый режим «только иконки» на планшете и выезжающая панель с оверлеем на мобильном.\n3. Активный пункт подсвечен, состояние сворачивания запоминается.\n4. Динамическое обновление контента при переключении разделов без перезагрузки.\n5. Доступность: навигация `nav` с `aria-label`, кнопки раскрытия с `aria-expanded`, управление с клавиатуры, видимый фокус, закрытие мобильного меню по Esc.\n6. Кроссбраузерность и отсутствие горизонтального скролла на 320px.\n\nПравила: чистый, организованный код, CSS-переменные для цветов и отступов, без внешних зависимостей, если стек не требует.\n\nФормат ответа: краткое описание структуры, затем полный код файлов, затем список, как проверить поведение на мобильном и с клавиатуры."
    }
  ]
}