{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "glass-navbar", "title": "Glass navbar", "description": "A sticky top bar on frosted glass in three styles, solid when the visitor asks for less transparency or more contrast.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/manniche/glass-navbar/glass-navbar.tsx", "content": "import { Menu, X } from 'lucide-react'\nimport { useEffect, useId, useRef, useState, type ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport type GlassNavLink = { href: string; label: string }\n\nexport type GlassNavbarProps = {\n brand: ReactNode\n links: GlassNavLink[]\n /** The href of the page the visitor is on; that link gets aria-current. */\n current?: string\n /** A button or link at the end, e.g. \"Book a call\". */\n action?: ReactNode\n /**\n * frosted: a full-width bar, always glass.\n * floating: a pill that floats clear of the edges.\n * scroll: over the hero with white text on a soft shade, glass once the page has scrolled.\n * Use it on a dark or photo hero; the shade keeps the text at 4.5:1 on mid-tone colours.\n */\n variant?: 'frosted' | 'floating' | 'scroll'\n className?: string\n}\n\n// The glass in one place. The tint is strong enough that text keeps at least 4.5:1 over pure black or\n// pure white behind it, in both themes. Without backdrop-filter, with reduced transparency or with more\n// contrast asked for, the bar turns solid.\nconst glass =\n 'border-border/60 bg-background/75 backdrop-blur-2xl backdrop-saturate-150 ' +\n 'supports-[not(backdrop-filter:blur(1px))]:bg-background ' +\n '[@media(prefers-reduced-transparency:reduce)]:bg-background [@media(prefers-reduced-transparency:reduce)]:backdrop-blur-none ' +\n 'contrast-more:border-border contrast-more:bg-background contrast-more:backdrop-blur-none'\n\n/** A sticky top navigation on frosted glass, with a menu button below the sm breakpoint. */\nexport function GlassNavbar({ brand, links, current, action, variant = 'frosted', className }: GlassNavbarProps) {\n const [open, setOpen] = useState(false)\n const [scrolled, setScrolled] = useState(false)\n const sentinel = useRef(null)\n const menuId = useId()\n\n // A one-pixel marker above the bar: once it leaves the view, the page has scrolled.\n // Works inside any scroll container, not only the window.\n useEffect(() => {\n if (variant !== 'scroll' || !sentinel.current) return\n const io = new IntersectionObserver(([e]) => setScrolled(!e.isIntersecting))\n io.observe(sentinel.current)\n return () => io.disconnect()\n }, [variant])\n\n useEffect(() => {\n if (!open) return\n const close = (e: KeyboardEvent) => e.key === 'Escape' && setOpen(false)\n addEventListener('keydown', close)\n return () => removeEventListener('keydown', close)\n }, [open])\n\n const solid = variant !== 'scroll' || scrolled || open\n const floating = variant === 'floating'\n\n return (\n <>\n {variant === 'scroll' &&
}\n
\n \n \n \n
\n \n \n )\n}\n", "type": "registry:component" } ], "categories": [ "navigation" ], "type": "registry:component" }