VibeUI
РусEng
Войти

Шапка сайта

Продуктовая шапка с мега-меню

Шапка SaaS-платформы: группы верхнего уровня раскрываются панелью с колонками ссылок и промокарточкой. На широкой раскладке панель открывается ещё и по наведению с задержкой намерения, на узкой те же группы складываются в аккордеон.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • groups — состав колонок и пояснений; links — прямые ссылки без раскрытия
  • promo — карточка релиза или предложения; её можно убрать у любой группы
  • brand, actionLabel — контент; tone — белая или графитовая поверхность

Собран из

Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Продуктовая шапка с мега-меню — Шапка SaaS-платформы: группы верхнего уровня раскрываются панелью с колонками ссылок и промокарточкой. На широкой раскладке панель открывается ещё и по наведению с задержкой намерения, на узкой те же группы складываются в аккордеон.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/navbar-004?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

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

<Navbar004
  brand="Платформа"
  groups={[{ label: "Продукт", columns: [{ title: "Платформа", links: [{ label: "Аналитика", href: "/analytics", note: "Отчёты в реальном времени" }] }] }]}
  links={[{ label: "Тарифы", href: "/pricing" }]}
  actionLabel="Запросить демо"
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Тема
tone · по умолчанию: auto
Название
brand · по умолчанию: Платформа
Кнопка
actionLabel · по умолчанию: Запросить демо
Акцент
accent · по умолчанию: цвет темы

Ещё в разделе «Шапка сайта»

Частые вопросы

Как установить компонент «Продуктовая шапка с мега-меню» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Продуктовая шапка с мега-меню»?
Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: button-016.
Что можно поменять в компоненте «Продуктовая шапка с мега-меню»?
Можно менять: groups — состав колонок и пояснений; links — прямые ссылки без раскрытия; promo — карточка релиза или предложения; её можно убрать у любой группы; brand, actionLabel — контент; tone — белая или графитовая поверхность. Сохранить как есть: импорты button-016 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; локальную палитру --vibeui-navbar-004-* и не подменять её токенами вашей темы; кнопку с aria-expanded и aria-controls в роли триггера вместо ссылки.
Компонент «Продуктовая шапка с мега-меню» бесплатный?
Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/navbar-004.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Составной блок: импортирует button-016 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает. Один файл, ноль зависимостей, клиентский компонент. Раскрытие — кнопка с aria-expanded и aria-controls, а не ссылка: клавиатура и скринридер получают правильный disclosure. Группы взаимоисключающие; закрытие по Escape и по нажатию снаружи. Наведение открывает панель с задержкой 120 мс, уход из шапки закрывает её через 180 мс — курсор, проезжающий мимо, ничего не распахивает. На широкой раскладке лист позиционируется от самой шапки и выезжает панелью со скруглением и тенью; на узкой тот же лист разворачивается аккордеоном через grid-template-rows 0fr→1fr. Ссылки вне раскрытия получают tabindex=-1, поэтому фокус не проваливается в закрытую панель. Палитра --vibeui-navbar-004-*.

Теги

  • navbar
  • header
  • mega-menu
  • saas
  • navigation
  • composite
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…