Библиотека Headers Premium

Сырьевые компоненты: копируй структуру и меняй стили под твой проект.

Все компоненты адаптивны :

max-width: 1920px;

min-width: 320px;

Ultimate Vision

Ultimate Vision — это флагманский компонент серии, представляющий собой кульминацию идей «стекломорфизма» и адаптивного дизайна. Он сочетает в себе эстетику парящей карты с выверенной технической стабильностью.

Адрес в системе :

// src / library / layout / headers / UltimateVision /

Double Line Luxury

Этот хедер воплощает эстетику дорогих брендов: минимум лишних деталей, много «воздуха» и акцент на изысканной типографике. Двухуровневая структура позволяет отделить сервисную информацию от основной навигации, сохраняя идеальный порядок.

Адрес в системе :

// src / library / layout / headers / DoubleLineLuxury /

Minimalist Pillar

Основная фишка здесь в «архитектурности»: вертикальные линии создают четкую структуру, а анимация их высоты при наведении добавляет интерфейсу интерактивной глубины.

Адрес в системе :

// src / library / layout / headers / MinimalistPillar /

Glass Morphic Tab

Этот хедер имитирует интерфейс современных операционных систем. Главная особенность — эффект «вкладки»: активный или наведенный пункт меню выделяется мягким стеклянным фоном, который кажется объемным благодаря размытию.

Адрес в системе :

// src / library / layout / headers / GlassMorphicTab /

Neon Accent Line

Этот хедер вдохновлен эстетикой киберпанка и высокотехнологичных интерфейсов. Его главная особенность — тонкая неоновая линия под навигацией, которая перемещается или расширяется при наведении, создавая эффект лазерного сканирования.

Адрес в системе :

// src / library / layout / headers / NeonAccentLine /

Sidebar Integrated Header

Кнопка меню слева выделена в отдельный блок, который как бы намекает на наличие скрытой вертикальной панели, в то время как остальная часть хедера остается легкой.

Адрес в системе :

// src / library / layout / headers / SidebarIntegrated /

Animated Gradient Border

Этот хедер сосредоточен на элегантности и технологичности. Тонкая анимированная граница создает ощущение живого, «дышащего» интерфейса, а многоуровневое меню демонстрирует возможности сложной навигации без перегрузки дизайна.

Адрес в системе :

// src / library / layout / headers / AnimatedGradientBorder /

Interactive Neumorphic Slate

Хедер, который выглядит как вырезанная из поверхности плита. Вместо классических теней наружу, мы используем внутренние тени (inset) и эффект «мягкого пластика».

Адрес в системе :

// src / library / layout / headers / NeumorphicSlate /

Floating Glass Card

Это чистый, лаконичный стекломорфизм без лишних усложнений.

Адрес в системе :

// src / library / layout / headers / FloatingGlassCard /