Back to Navigation blocks
A Responsive Navbar Component that transforms into a floating pill on scroll, with a built-in mobile menu, social proof, and dark mode.
npm i framer-motionThis component supports Tailwind CSS dark: variants. To render this component in dark mode, add the dark className to your application's root element (for example, in app/layout.tsx).
Using <html>
<html className="dark"> ... </html>
Using <body>
<body className="dark"> ... </body>
Use Orbit Border
Use Morph Menu
A Responsive Navbar Component with a built-in Navbar Mobile Menu, clean navigation, and dark mode support for modern React websites.
A Navbar Menu Component with responsive navigation, mobile menu support, social proof, and built-in dark mode for modern React websites.
A Responsive Navbar Component with a built-in Navbar Mobile Menu that transforms into a floating pill on scroll, with social proof and dark mode.