Floating Nav is a sleek and modern navigation component designed to give your Framer sites a premium, polished feel. It stays pinned to the top of the screen but reacts dynamically as users scroll, making it the perfect choice for landing pages that need to feel interactive and high end. It combines clean aesthetics with smooth animations to keep your site's header both functional and beautiful.
It renders a fully responsive navigation bar that floats over your content. The component handles your logo, navigation links, and a call to action button in one compact layout. What makes it special is the scroll behavior; you can set it to shrink slightly or add a shadow once the user moves down the page, which helps keep the focus on your content. It also handles responsiveness automatically, switching layouts based on the tablet and mobile breakpoints you define.
Content and Links: Easily update your brand logo text, CTA button label, and manage up to four navigation links with their respective URLs.Visual Styling: You have total control over the background color, text color, and the intensity of the backdrop blur for that popular glassmorphism effect. You can also adjust the max width, top spacing, and internal padding.Scroll Effects: Fine tune the scroll experience by setting the exact vertical distance before the bar transforms. You can customize the scale factor and add a custom shadow to make the bar pop when it’s active.Typography: Set independent fonts for your logo, links, and CTA button to ensure the navigation perfectly matches your existing brand identity.Device Settings: Set custom pixel breakpoints for tablet and mobile views so the navigation looks perfect on every screen size.
SaaS and startup landing pages
Personal portfolios and resumes
Product launch pages
Minimalist blogs and articles
Any site needing a sticky, animated header
If you ship something cool with it, post it on X and tag me @Dulajweb , or send it over. I’d love to see what you create.
Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb
Dulaj dilshan
