Magnet Side Navbar
Turn navigation into an experience
About this component
About
Magnet Side Navbar is a floating vertical navigation with a smooth magnify effect. The hovered item grows together with nearby links while an animated label slides into view. It includes light and dark themes, left and right label positions, individually hideable navigation items, and a dedicated mobile variant with permanently visible labels.
What you can customize
Built entirely with native Framer elements, so everything stays editable directly on the canvas. Customize the icons, hover icons, labels, links, colors, sizes, spacing, radius, shadows, typography, animations, item visibility, label direction, themes, layout, and responsive behavior without touching code.
Great for (examples)
Just a few ideas, use it anywhere you want navigation to feel more interactive:
Portfolio websites
Creative agency websites
Personal websites
Designer portfolios
Developer portfolios
Studio websites
Experimental landing pages
Minimal websites
Product showcases
Modern one-page websites
Premium Framer templates
Interactive web experiences
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.
