Шапка сайта
Шапка ресторана поверх фото
Шапка ресторана: словомарка серифом капителью, ссылки с акцентным подчёркиванием, зелёная точка «сегодня до 23:00», телефон и кнопка «Забронировать». В режиме overlay лежит прозрачной поверх первого экрана, при скролле темнеет и сжимается.
Что можно поменять
- brand, caption, links, hours, phone, phoneHref, actionLabel, actionHref, menuLabel
- overlay, sticky
- accent и background, tone
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/navbar-021?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, «use client» ради скролла и меню. <header>: sticky по умолчанию; overlay=true — position:fixed поверх страницы, data-scrolled переключается после 40px (слушатель scroll, passive), фон и линия появляются переходом, отступы бара сжимаются. Ссылки — подчёркивание transform:scaleX. Часы — с зелёной точкой через ::before. Ссылки и кнопка от 64rem (container query), часы и телефон от 76rem; уже — кнопка «Меню» с aria-expanded и список под шапкой. Палитра --vibeui-navbar-021-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; шрифты Playfair Display и Manrope подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.
Теги
- restaurant
- cafe
- bar
- food
- menu
- dining
- header
- navbar
- sticky
- overlay
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…