Загрузка...
Адаптивная навигационная панель с оверлей-меню для мобильных. Лого, ссылки, кнопки. Для SaaS, лендингов. Tailwind CSS.
<header class="relative w-full">
<nav class="mx-auto max-w-7xl px-6 py-5 flex items-center justify-between">
<a href="#" class="flex items-center gap-3 group">
<div
class="h-8 w-8 rounded-md bg-white/10 ring-1 ring-white/15 flex items-center justify-center text-sm tracking-tight font-semibold group-hover:bg-white/15 transition-colors"
style="letter-spacing:-0.02em;">
ΛN
</div>
<span class="text-base font-medium tracking-tight group-hover:opacity-90 transition-opacity">Nova</span>
</a>
<div class="hidden md:flex items-center gap-8">
<a class="text-sm font-medium text-neutral-300 hover:text-white transition-colors" href="#">Features</a>
<a class="text-sm font-medium text-neutral-300 hover:text-white transition-colors" href="#">Pricing</a>
<a class="text-sm font-medium text-neutral-300 hover:text-white transition-colors" href="#">Docs</a>
<a class="text-sm font-medium text-neutral-300 hover:text-white transition-colors" href="#">Contact</a>
</div>
<div class="hidden md:flex items-center gap-3">
<a href="#"
class="px-3.5 py-2 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10 text-sm font-medium transition-colors">Sign
in</a>
<a href="#"
class="px-3.5 py-2 rounded-lg bg-emerald-500/90 hover:bg-emerald-500 text-neutral-900 text-sm font-semibold transition-colors">Get
started</a>
</div>
<button id="mobileOpen" class="md:hidden p-2 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10 transition-colors" aria-label="Open menu">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" class="lucide lucide-menu h-5 w-5" style="stroke-width:1.5;"><path d="M4 12h16" class=""></path><path d="M4 18h16" class=""></path><path d="M4 6h16" class=""></path></svg>
</button>
</nav>
<!-- Mobile Menu -->
<div id="mobileMenu" class="hidden fixed inset-0 z-50 bg-neutral-950/80 backdrop-blur-md">
<div class="absolute right-4 top-4">
<button id="mobileClose" class="p-2 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10 transition-colors" aria-label="Close menu">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x h-5 w-5" style="stroke-width:1.5;"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
</button>
</div>
<div class="mx-auto mt-20 w-11/12 max-w-sm rounded-2xl bg-neutral-900/70 ring-1 ring-white/10 p-6">
<div class="flex flex-col gap-3">
<a class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-white/5 transition-colors" href="#">
<span class="text-sm font-medium">Features</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="chevron-right" class="lucide lucide-chevron-right h-4 w-4 text-neutral-400"
style="stroke-width:1.5;">
<path d="m9 18 6-6-6-6" class=""></path>
</svg>
</a>
<a class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-white/5 transition-colors" href="#">
<span class="text-sm font-medium">Pricing</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="chevron-right" class="lucide lucide-chevron-right h-4 w-4 text-neutral-400"
style="stroke-width:1.5;">
<path d="m9 18 6-6-6-6" class=""></path>
</svg>
</a>
<a class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-white/5 transition-colors" href="#">
<span class="text-sm font-medium">Docs</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="chevron-right" class="lucide lucide-chevron-right h-4 w-4 text-neutral-400"
style="stroke-width:1.5;">
<path d="m9 18 6-6-6-6" class=""></path>
</svg>
</a>
<a class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-white/5 transition-colors" href="#">
<span class="text-sm font-medium">Contact</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="chevron-right" class="lucide lucide-chevron-right h-4 w-4 text-neutral-400"
style="stroke-width:1.5;">
<path d="m9 18 6-6-6-6" class=""></path>
</svg>
</a>
</div>
<div class="mt-5 flex items-center gap-2">
<a href="#"
class="flex-1 px-3.5 py-2 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10 text-sm font-medium text-center transition-colors">Sign
in</a>
<a href="#"
class="flex-1 px-3.5 py-2 rounded-lg bg-emerald-500/90 hover:bg-emerald-500 text-neutral-900 text-sm font-semibold text-center transition-colors">Get
started</a>
</div>
</div>
</div>
</header>