Glass Shrink Navbar
A free sticky navbar component for React that shrinks into a blur-glass bar on scroll, with a spring underline and an accessible mobile drawer.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 2 runtime packages
Glass Shrink Navbar is a free navbar component for React and Next.js, built with Motion and Tailwind. The header sits sticky at the top of the page, 72 pixels tall and fully transparent; once the page scrolls past 24 pixels it eases down to 56 pixels while a blur-glass surface fades in behind the links, and both reverse when you scroll back up. On desktop widths a single shared underline springs between links as the pointer moves and settles on the active link.
The whole scroll effect is CSS transitions keyed off one data attribute, so JavaScript does no per-frame work: a scroll listener flips data-scrolled only when the 24 pixel threshold is crossed. Below the lg breakpoint the links move into a full-height drawer built on the native dialog element, so the focus trap, Escape handling and focus return come from the browser. The hamburger is a real button with aria-expanded and aria-controls, background scroll is locked while the drawer is open, and every link is a real anchor. With prefers-reduced-motion enabled the surface change is a 150 millisecond colour fade, the height snaps, the underline moves instantly and the drawer becomes an opacity-only fade with no stagger.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/nav-glass-shrinkUsage
import { NavGlassShrink } from "@/components/nav-glass-shrink";
export default function Page() {
return (
<>
<NavGlassShrink
logo={<a href="/">Acme</a>}
links={[
{ label: "Features", href: "/features" },
{ label: "Pricing", href: "/pricing" },
{ label: "Docs", href: "/docs" },
]}
cta={{ label: "Get started", href: "/signup" }}
activeHref="/features"
/>
<main>...</main>
</>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | required | Left slot: brand link or image. |
| links | { label: string; href: string }[] | required | Navigation links, rendered inline on desktop and in the drawer below lg. |
| cta | { label: string; href: string } | undefined | Optional right-side CTA button rendered with inverted tokens. |
| activeHref | string | undefined | Href of the current page's link: it gets aria-current="page" and the resting underline. Pass e.g. usePathname() output in Next.js. |
| className | string | undefined | Additional classes merged onto the header. |
Customisation
Glass Shrink Navbar declares no tokens of its own. The bar, links and drawer consume the global semantic tokens through Tailwind utilities, the shrink and glass transitions run on the shared --dur-2 and --ease-out-quart tokens, and the underline and drawer use the shared springSnappy and springSoft presets from lib/motion.ts, so retuning those presets retunes every spring in the library together. The className prop is merged onto the header, which is the usual place to change its stacking or maximum width:
:root {
--dur-2: 250ms;
}
<NavGlassShrink
logo={<a href="/">Acme</a>}
links={links}
className="z-50"
/>Frequently asked questions
- Is Glass Shrink Navbar free for commercial use?
- Yes. Glass Shrink Navbar is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Glass Shrink Navbar accessible for keyboard and screen reader users?
- Yes. The component renders a header landmark containing a nav landmark, every link is a real anchor with a visible focus ring, and the link for the current page carries aria-current set to page. The hamburger is a real button with aria-expanded and aria-controls, and the mobile drawer is a native dialog opened with showModal, so the browser provides the focus trap and Escape handling and returns focus to the button when the drawer closes. Background scroll is locked while the drawer is open, and the decorative underline is hidden from assistive technology.
- How does the shrink effect perform, and what happens with reduced motion?
- The shrink and glass surface are plain CSS transitions keyed off a single data-scrolled attribute on the header. The scroll listener writes that attribute only when the 24 pixel threshold is crossed in either direction, so scrolling triggers no per-frame React renders and no JavaScript animation. With prefers-reduced-motion enabled the transition is limited to a 150 millisecond background and border colour fade, the height and blur snap instantly, the underline moves with no spring, and the drawer becomes a short opacity fade with no stagger.