✨ Key Features — Why Try MorphNav?
MorphNav is FREE for its first launch. Get the full component and explore all features without paying.
1. 100% No-Code Customization
MorphNav exposes dozens of properties directly in Framer, organized into 8 folders: Behavior, Logo, Links, Typography, CTA, Dimensions, Appearance, and Breakpoints.
2. Intelligent Dynamic Layout
Choose your layout with one click:
Space Between: Classic and clean.
Center Links: Perfect for modern SaaS.
Logo Center: Elegant for Editorial and E-commerce.
3. Glassmorphism & Floating Pill
Create modern Floating Pill navigation with backdrop-filter blur and customizable outer margins.
4. Smart Mobile Dropdown
MorphNav automatically adapts to mobile. At your chosen breakpoint, links are replaced by an animated Hamburger icon that morphs into an X. The dropdown uses smooth Framer Motion spring physics.
5. Conversion-Optimized CTA
The built-in CTA stays on the right on desktop and moves to the bottom of the mobile dropdown for easy thumb access. Choose Solid, Outline, or Ghost styles.
🛠 How to Use
Copy & Paste: Copy the component into your Framer project.
Set Sticky (Optional): Enable "Sticky Top" to keep navigation visible while scrolling.
Customize: Adjust fonts, logo, links, colors, and more through Framer's Property Controls.
Z-Index: Use a high Z-Index (e.g. 10) so the dropdown stays above other elements.
🎛 Property Controls
Logo: Text with Native Font Picker or Image (SVG/PNG).
Links & Typography: Easily add/remove links and customize fonts.
Breakpoints: Set Tablet and Mobile activation widths.
Styling: Adjust border radius, shadows, and glass blur intensity.
