Шапка сайта
Шапка курса с ценой и прогрессом
Шапка лендинга курса: словомарка с ромбиком, подпись «курс · 6 недель», ссылки, кнопка «Записаться» с ценой в капсуле. Под шапкой полоска прогресса чтения страницы. На узком экране — кнопка «Меню».
Что можно поменять
- brand, caption, links, actionLabel, actionPrice, actionHref, menuLabel
- progress, sticky
- accent и background, tone
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/navbar-022?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, «use client» ради прогресса и меню. <header> sticky с полупрозрачным фоном и blur. Прогресс — span с transform:scaleX(var(--progress)); значение пишется в CSS-переменную из requestAnimationFrame на scroll (passive), без ререндеров. Ссылки и кнопка от 60rem (container query); уже — кнопка «Меню» с aria-expanded и список под шапкой. Палитра --vibeui-navbar-022-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; шрифты Unbounded и Inter подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.
Теги
- course
- education
- edtech
- landing
- header
- navbar
- progress
- sticky
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…