Free
☁️ SaaS

Glass Command Navbar

Glassmorphism navbar with scroll shrink, active-link lamp indicator and a built-in ⌘K command palette stub.

2.3k views 147 copies 289 words

The Prompt

# Glass Command Navbar — UI Component

## Goal
Build a premium glass navbar: blur shell, lamp-style active indicator, scroll behavior, mobile overlay, and a ⌘K palette stub. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Shell: fixed top, inner container rounded-full mt-4 px-2 with bg-white/[0.06] backdrop-blur-xl border-white/[0.1] — floating pill style, not full-width bar.
- Links: 5 items px-4 py-2; active link gets a 'lamp': a pill highlight behind it plus a 2px glow line on top edge — the highlight is one shared element that glides between links.
- Right cluster: ⌘K button (kbd-styled, opens palette stub: centered modal with search input + 5 fake results, arrow-key selectable), divider, avatar or CTA.
- Scroll behavior: at top the pill is wider (max-w-4xl) and taller; after 80px it compresses (max-w-2xl, h-12) and bg opacity rises — one smooth animated transition, not a snap.
- Mobile: pill shows logo + burger; menu opens as full glass overlay, links 28px with 60ms stagger, close morphs burger→×.

## Motion Spec
- Lamp indicator uses a shared layout element so it fluidly slides + resizes between links, 350ms spring.
- Palette opens with scale 0.96→1 + fade 180ms; backdrop blurs page behind.
- Compress-on-scroll interpolates via scroll progress over the 0-80px window (no binary toggle jump).
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<GlassNav links={{label,href}[]} cta?={{label,href}} onPaletteQuery?=(q)=>Result[] />`

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no external CSS files.
- Works on mobile: touch targets ≥ 44px, no hover-only affordances.
- 60fps: animate only `transform` and `opacity`; use `will-change` sparingly.
- Accessible: correct roles/aria, keyboard operable, focus-visible styles.

You may also like