Floating Navbar

new

Pill navbar that turns to frosted glass on scroll, hides on scroll-down, returns on scroll-up, with a sheet menu on mobile.

navigationscroll8 files · 572 locdeps: clsx, tailwind-merge

Scroll this box ↓

The bar is transparent at the top, condenses into frosted glass once you scroll, hides while you scroll down and comes back the moment you scroll up.

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/floating-navbar.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs floating-navbar

import { FloatingNavbar } from "@/components/opus/blocks/floating-navbar";

// in your layout, above the page content:
<FloatingNavbar />

Prop	Type	Default	Description
scrollContainer	HTMLElement \| null	—	Track a scroll box instead of the window.

A block is a starting point, not a black box: copy it, then edit the copy and the content inline.