--- title: "Magnetic Float Nav — Framer component · Best of Framer" description: "$9.00 · Framer component · by MotionIQ Studio · Navigation. Magnetic Float Nav reimagines site navigation as a floating, interactive object." canonical: "https://framer.elliotli.dev/component/magnetic-float-nav" --- [Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Magnetic Float Nav # Magnetic Float Nav Draggable menu with physics snap. [View on Framer](https://framer.com/marketplace/components/magnetic-float-nav/?via=elliot-li) ![Magnetic Float Nav preview image 1](https://framer.elliotli.dev/og/component/magnetic-float-nav/cf9950e7eecbc3b7/1600x1200.jpg) ## Summary Magnetic Float Nav reimagines site navigation as a floating, interactive object. ## Description 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. ### Key architectural highlights: - **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. ### Features: - **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. ### Customisation Options: ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-p0xfab07-GByRiCsyAfUltk2p3hbA28SFR9qoBM) 1. **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. 2. **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. 3. **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. 4. **Typography:** - **Font:** Native Framer Font control supporting all Google Fonts - family, size, weight, and letter spacing in one panel. 5. **Menu Button:** - **Button Size, BG & Icon Color:** Control the circular toggle button's diameter, fill, and hamburger/X icon color. 6. **Animation:** - **Reveal Time:** Slider to set how long the menu opening animation takes. - **Stagger:** Delay increment per menu item for the cascade reveal. 7. **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. 8. **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. ### Set up: 1. Paste the **Magnetic Float Nav** component onto your Canvas. 2. Open the property panel and update **Menu Items** with your site's navigation links. 3. Upload your **Logo Image** or leave it blank for the text fallback. 4. Match **Bar Color** and **Link Font Color** to your brand's color palette. 5. Choose your **Font** using the native Framer Font picker. 6. Set your **Mobile Breakpoint** and **Scale UI** values to fine-tune the mobile experience. 7. 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. ## Rank history [How rankings work →](/terms#rankings) - All · #6176 ## Details - **Author**: MotionIQ Studio - **Price**: $9.00 - **Published**: 2026-02-21 - **Updated**: 2026-02-21 - **Added**: 2026-02-19 - **Categories**: Navigation ## More like this - [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu - [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation - [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects - [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation