WebX Magnetic Nav

WebX Magnetic Nav

About WebX Magnetic Nav

Make navigation feel alive.

WebX Magnetic Nav is a premium Framer component for creating tactile, highly customizable navigation experiences.

Instead of a standard hover effect, each navigation item responds magnetically to the visitor’s cursor while a fluid animated pill moves between links. Fine-tune the strength and character of the interaction with dedicated spring controls.

The component also handles the practical side of navigation: automatic current-page detection, manual active states, responsive behavior, and a dedicated animated mobile menu.

Magnetic Motion

Control magnetic strength, hover scale, stiffness, damping, and mass to create anything from subtle attraction to expressive cursor interaction.

Active & Hover States

Create distinct default, hover, and active styles. Automatically detect the current page or manually select the active navigation item.

Responsive Mobile Navigation

Set your own breakpoint and automatically transform the desktop navigation into a compact menu button with an animated popup.

Deep Customization

Customize typography, orientation, spacing, padding, colors, backgrounds, borders, corner radius, glass blur, shadows, indicators, menu styling, popup styling, and motion directly from Framer.

Included

  • Magnetic navigation interaction

  • Fluid animated hover pill

  • Automatic current-page detection

  • Manual active states

  • Horizontal & vertical layouts

  • Dot & line active indicators

  • Responsive mobile menu

  • Animated menu icon

  • Custom mobile breakpoint

  • Glass effects

  • Custom shadows & borders

  • Advanced spring controls

  • Native Framer controls

Designed for creative portfolios, agencies, SaaS products, landing pages, and premium Framer websites.