MMridha UI

Floating Glass Navbar

A sticky navigation bar that floats above content with a frosted glass effect. Scroll-aware — becomes more opaque as you scroll. Includes desktop navigation links, a mobile menu, logo, and theme toggle slot.

ReactNext.jsClient ComponentReactMotionCSS
Loading preview…

CLI Installation

Add to your project using the shadcn CLI:

npx shadcn@latest add @mridha/floating-glass-navbar

Registry endpoint: https://ui.mridha.net/r/floating-glass-navbar.json

Manual Installation

1. Install dependencies

pnpm add motion

2. Copy the component file

Copy the source from the Code tab above into components/ui/floating-glass-navbar.tsx

3. Import the component

import { FloatingGlassNavbar } from "@/components/ui/floating-glass-navbar";

4. Use it in a page

export default function Page() {
  return (
    <main>
      <FloatingGlassNavbar />
    </main>
  );
}

Dependencies

motion

Accessibility

  • Mobile menu toggle uses aria-expanded and aria-controls.
  • Navigation uses semantic <nav> with aria-label.
  • All interactive elements are keyboard accessible.

Performance

  • Scroll listener uses passive option for better performance.
  • Uses backdrop-filter — verify support for your target browsers.

Browser Limitations

  • backdrop-filter is not supported in Firefox versions below 103.