1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegación navbarnavigationglasssticky

Glass Navbar

Barra de navegación fija con desenfoque glassmorphism y desplazamiento suave.

Astro Kit Components

Uso

Copia y pega este código directamente en tu página de Astro:

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>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/GlassNavbar.astro:

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>

Información Rápida

Categoría
Navegación
Nombre de archivo
GlassNavbar.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
navbarnavigationglasssticky