Floating Shrink Header

A sticky navigation header that runs full width at the top of a page and shrinks into a blurred floating pill once the user scrolls past 100px, with a sliding hover highlight on nav links and an animated dropdown menu on mobile.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Floating Shrink Header to your project and fits it to your theme.

import Header02 from "@/components/ui/header-02";

export default function Header02Demo() {
  return <Header02 />;
}