1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegaciónnavbarnavigationglasssticky

Glass Navbar

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

React Kit Components

Uso

Copia y pega este código directamente en tu componente React:

tsx
import { GlassNavbar } from 'react-component-kit-ui/navigation';

<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/GlassNavbar.tsx + GlassNavbar.css:

GlassNavbar.tsx
'use client';

import type { ReactNode } from 'react';
import LogoWithGalaxy from '../LogoWithGalaxy';
import './GlassNavbar.css';

/** GlassNavbar — ported from astro-component-kit. */
export interface GlassNavbarProps {
  /** Accepted for compatibility with the Astro demo (the logo is rendered instead). */
  brand?: string;
  brandHref?: string;
  links?: ReactNode;
  actions?: ReactNode;
}

export function GlassNavbar({ brandHref = '/',
  links,
  actions
}: GlassNavbarProps) {
  return (
    <>
      <header className="glass-nav" data-rk-947bdc="">
        <div className="glass-nav__inner" data-rk-947bdc="">
          <a href={brandHref} className="glass-nav__brand" data-rk-947bdc="">
            <LogoWithGalaxy size="small" />
          </a>
          <nav className="glass-nav__links" data-rk-947bdc="">{links}</nav>
          <div className="glass-nav__actions" data-rk-947bdc="">{actions}</div>
        </div>
      </header>
    </>
  );
}

export default GlassNavbar;
GlassNavbar.css
/* GlassNavbar — ported from astro-component-kit (navigation/GlassNavbar.astro) */

.glass-nav:where([data-rk-947bdc]) { 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:where([data-rk-947bdc]) { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; height: 80px; display: flex; align-items: center; gap: 2rem; }
.glass-nav__brand:where([data-rk-947bdc]) { text-decoration: none; display: flex; align-items: center; }
.glass-nav__brand:hover:where([data-rk-947bdc]) { opacity: 0.9; }
.glass-nav__links:where([data-rk-947bdc]) { display: flex; align-items: center; gap: 0.25rem; flex: 1; }
.glass-nav__links:where([data-rk-947bdc]) 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:where([data-rk-947bdc]) a:hover { color: #e2e8f0; background: rgba(255, 255, 255, 0.06); }

Información Rápida

Categoría
Navegación
Nombre de archivo
GlassNavbar.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
navbarnavigationglasssticky