Magnetic Float Nav reimagines site navigation as a floating, interactive object. It breaks free from the top bar convention by sitting anywhere on the canvas, snapping back to its origin with a satisfying spring physics feel, and expanding into a smooth reveal of your menu items - all without a single line of code.
Magnetic Snap Physics: Uses Framer Motion's spring-based drag constraints to create a satisfying "snap back to origin" behavior when the user releases the bar.
Responsive Scale Engine: A dedicated `mobileScale` multiplier ensures every dimension - bar height, button size, padding, font size, icon stroke - scales proportionally at any breakpoint.
Staggered Item Reveal: Each menu item animates in with an individually configurable delay, creating a fluid cascade effect that elevates the entire interaction.
Dashed Origin Indicator: A subtle dashed bounding box marks the bar's original position while it's being dragged, providing clear spatial feedback without cluttering the design.
Draggable & Snappable: Full drag support with optional snap-back to the original position within a configurable threshold radius.
Smooth Menu Reveal: Items expand outward from the button with a staggered, spring-based animation sequence.
Logo Area: Dedicated left-side zone supporting custom logo images (PNG/SVG) or a fallback text label.
Mobile-Aware Scaling: A single slider scales the entire component - every spacing, size, and font - proportionally for mobile screens.
Full Typography Control: Framer's native Font picker lets you set font family, size, weight, and letter spacing from the properties panel.
Non-Intrusive Origin Box: An optional dashed indicator shows where the bar "lives" when it's been dragged away.
Content:
Logo Image: Upload your brand logo (PNG/SVG). Falls back to a clean "LOGO" text label when empty.
Menu Items: Add, remove, and label links directly from the property panel - no code required.
Bar Style:
Bar Color, Height, Padding: Full control over the pill's appearance.
Corners: Unified border-radius slider for the bar and all menu item pills.
Link Style:
Link BG & Font Color: Independent color pickers for menu item backgrounds and text.
Spacing & Padding: Fine-tune the gap between items and horizontal padding inside each pill.
Typography:
Font: Native Framer Font control supporting all Google Fonts - family, size, weight, and letter spacing in one panel.
Menu Button:
Button Size, BG & Icon Color: Control the circular toggle button's diameter, fill, and hamburger/X icon color.
Animation:
Reveal Time: Slider to set how long the menu opening animation takes.
Stagger: Delay increment per menu item for the cascade reveal.
Interaction:
Draggable Toggle: Enable or disable the floating drag behavior entirely.
Snap Back: Toggle whether the bar returns to its origin on release.
Snap Range: Set the distance threshold within which snap-back activates.
Origin Box Color: Customize the dashed placeholder border color.
Mobile:
Breakpoint: Set the screen width at which mobile scaling kicks in.
Scale UI: A single multiplier (e.g. 0.75) shrinks all dimensions proportionally.
Side Padding: Additional horizontal offset for the bar on mobile screens.
Paste the Magnetic Float Nav component onto your Canvas.
Open the property panel and update Menu Items with your site's navigation links.
Upload your Logo Image or leave it blank for the text fallback.
Match Bar Color and Link Font Color to your brand's color palette.
Choose your Font using the native Framer Font picker.
Set your Mobile Breakpoint and Scale UI values to fine-tune the mobile experience.
Toggle Draggable on or off depending on whether you want the interactive floating behavior.
After completing your purchase, you will receive a link to the component.
Copy the URL and paste it into your Framer project to import it.
MotionIQ Studio
