Animated Radial Nav

About

Animated Radial Nav expands a compact circular button into five concentric navigation rings. Curved text rolls along each ring on hover while the selected band grows. Smooth opening and closing animations, a morphing menu icon, and dedicated phone layouts make the navigation itself part of the experience.

What you can customize

Built entirely with native Framer elements and fully editable on the canvas. Change each link’s label, destination, and new-tab behavior from the panel. Customize colors, typography, ring sizes, icons, and animation timing within the component. Includes five links; longer labels may need spacing adjustments. No code or overrides required.

Great for (examples)

Just a few ideas, use it anywhere a compact menu should open into something memorable:

• Radial navigation and circular menus

• Expanding menus and concentric ring layouts

• Portfolio navigation and personal websites

• Creative agencies and design studios

• Photography portfolios and visual showcases

• Fashion, lifestyle, and experimental brands

• Architecture and interior design websites

• Cultural projects, galleries, and exhibitions

• Editorial websites and project collections

• One-page sites and section navigation

• Curved typography and text hover interactions

• Mobile menus and responsive 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 navigation components for your next project:

• Motion Corner Menu ✨

• Fullscreen Navbar ✨

• Explore all components →