Liquid Pill Navbar
Fluid motion for your navigation
About this component
About
Liquid Pill Navbar is a free animated navigation bar for Framer. A fluid indicator glides between links, stretching and settling like liquid as visitors move through your site.
The compact floating pill menu adds a subtle interactive detail to portfolios, creative websites and product pages. It can highlight the current page automatically, while keyboard navigation and reduced-motion support make the experience more considered.
What you can customize
Make the navbar your own with colors, typography and motion that fit your brand. Edit the link labels and destinations, choose whether links open in a new tab, and add up to eight items.
Shape the pill with background blur, padding, spacing, border, radius and shadow. Style the active indicator separately with its own color, gloss, shadow and text color. Choose a liquid or sliding transition, adjust the speed, stretch and wobble, and select how links respond on hover. Set the starting selection, choose a hover style and fine-tune the return delay. Add the floating link bar to a custom header or section navigation.
Great for (examples)
A few ways to use this animated pill navigation:
Designer portfolios, personal websites and freelance brands
Creative studios, branding and digital agencies
SaaS products, software websites and landing pages
App launches, startups and waitlist pages
Photography portfolios and visual project showcases
Architecture studios, interior and editorial websites
Minimal one-page sites, custom headers and Framer templates
Share your build
If you ship something cool with it, post it on X and tag me @Matthias_Oel, or send it over. I’d love to see what you create.
Need help?
Questions or feedback? Reach me anytime: matthias@lmvision.de or on X @Matthias_Oel.
Need a matching component?
Explore more ways to complete your website:
