Navigation navbarnavigationglasssticky

Glass Navbar

A sticky top navigation bar with glassmorphism blur and smooth scroll behavior.

Astro Kit Components

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { GlassNavbar, GlassButton } from 'astro-component-kit';
---

<GlassNavbar brand="MyProject">
  <div slot="links">
    <a href="#">Home</a>
    <a href="#">Components</a>
    <a href="#">Showcase</a>
  </div>
  <div slot="actions">
    <GlassButton variant="ghost" size="sm">Log in</GlassButton>
    <GlassButton size="sm">Get Started</GlassButton>
  </div>
</GlassNavbar>
--- import { GlassNavbar, GlassButton } from 'astro-component-kit'; --- <GlassNavbar brand="MyProject"> <div slot="links"> <a href="#">Home</a> <a href="#">Components</a> <a href="#">Showcase</a> </div> <div slot="actions"> <GlassButton variant="ghost" size="sm">Log in</GlassButton> <GlassButton size="sm">Get Started</GlassButton> </div> </GlassNavbar>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/GlassNavbar.astro and paste the following code:

astro 
---
interface Props { brand?: string; brandHref?: string; }
const { brand = 'Astro Components', brandHref = '/' } = Astro.props;
---
<header class="glass-nav">
  <div class="glass-nav__inner">
    <a href={brandHref} class="glass-nav__brand">{brand}</a>
    <nav class="glass-nav__links"><slot name="links" /></nav>
    <div class="glass-nav__actions"><slot name="actions" /></div>
  </div>
</header>
<style>
  .glass-nav { position: sticky; top: 0; z-index: 100; background: rgba(10, 10, 20, 0.7); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .glass-nav__inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; height: 64px; display: flex; align-items: center; gap: 2rem; }
  .glass-nav__brand { font-size: 1.1rem; font-weight: 800; color: #f1f5f9; text-decoration: none; background: linear-gradient(135deg, #818cf8, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
  .glass-nav__links { display: flex; align-items: center; gap: 0.25rem; flex: 1; }
  .glass-nav__links :global(a) { padding: 0.4rem 0.8rem; font-size: 0.875rem; font-weight: 500; color: #94a3b8; text-decoration: none; border-radius: 8px; transition: 0.2s; }
  .glass-nav__links :global(a:hover) { color: #e2e8f0; background: rgba(255, 255, 255, 0.06); }
</style>
--- interface Props { brand?: string; brandHref?: string; } const { brand = 'Astro Components', brandHref = '/' } = Astro.props; --- <header class="glass-nav"> <div class="glass-nav__inner"> <a href={brandHref} class="glass-nav__brand">{brand}</a> <nav class="glass-nav__links"><slot name="links" /></nav> <div class="glass-nav__actions"><slot name="actions" /></div> </div> </header> <style> .glass-nav { position: sticky; top: 0; z-index: 100; background: rgba(10, 10, 20, 0.7); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .glass-nav__inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; height: 64px; display: flex; align-items: center; gap: 2rem; } .glass-nav__brand { font-size: 1.1rem; font-weight: 800; color: #f1f5f9; text-decoration: none; background: linear-gradient(135deg, #818cf8, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .glass-nav__links { display: flex; align-items: center; gap: 0.25rem; flex: 1; } .glass-nav__links :global(a) { padding: 0.4rem 0.8rem; font-size: 0.875rem; font-weight: 500; color: #94a3b8; text-decoration: none; border-radius: 8px; transition: 0.2s; } .glass-nav__links :global(a:hover) { color: #e2e8f0; background: rgba(255, 255, 255, 0.06); } </style>

Quick Info

Category
Navigation
Filename
GlassNavbar.astro
Dependencies
None — pure Astro + CSS
Tags
navbarnavigationglasssticky