NavFlow Pro is a code component that delivers what native Framer navigation cannot. It combines real-time DOM measurement, spring-physics animations, and responsive media queries into a single, production-ready navbar.
Core Features
Sliding IndicatorA pill or underline that glides between nav items using measured DOM positions and spring animations. This requires getBoundingClientRect calculations that are impossible with native Framer interactions.
Morphing Mega DropdownWhen hovering between items, the dropdown panel smoothly morphs its size and cross-fades content instead of closing and reopening. Layout animations handle the transition automatically.
Scroll-Aware CompactionThe navbar detects scroll position and transitions into a compact mode, reducing height while maintaining all functionality. Toggle this on or off from the property panel.
Full Mobile MenuBelow your chosen breakpoint, the component switches to a slide-in panel with accordion sub-menus, overlay backdrop, and spring-animated transitions. One component, two experiences.
Featured CardsEach dropdown can include an optional promo card with image, badge, title, description, and link. Perfect for highlighting new features, blog posts, or announcements.
Themes and Customization
Four built-in themes are included: Obsidian (dark with glass blur), Snow (light with blur), Midnight (pure dark, no blur), and Zinc (clean light). Select Custom to unlock 14 individual color controls covering every element from nav background to badge labels.
Property Panel
The property panel is organized into clearly labeled sections using grouped controls. Every section includes short descriptions explaining what each setting does.
Brand: Logo text, optional logo image, image height, and link destination.
Nav Items: Up to 8 items. Each item has a label, page link, dropdown type (None, Mega Panel, or Link List), column data, and optional featured card settings.
Indicator: Choose between Pill, Underline, or None. Control height, radius, offset, and color.
CTA Button: Toggle visibility, set label and link, choose between Filled, Outline, or Ghost style.
Dropdown: Adjust panel padding, column gap, and vertical offset.
Scroll: Enable sticky positioning and compact-on-scroll behavior.
Mobile: Set the breakpoint width for switching to the mobile menu.
Layout: Control nav height, max content width, horizontal padding, and item gap.
Styling: Set border radius for dropdown panel, featured cards, CTA button, and link items.
Typography: Seven independent font controls for Logo, Nav Links, Column Titles, Column Items, CTA, Featured Title, and Featured Description.
Dropdown Content Format
Column data uses a simple text format. Each line creates one column:
Category Title: Item 1, Item 2, Item 3
Add links to items with the pipe separator:
Products: Analytics|/analytics, Automation|/automation
Preview Control
Use the Preview Open setting to choose which dropdown appears open by default. Set it to -1 to close all. This is useful for configuring your marketplace preview or presenting the component on a landing page.
Why Code
This component requires DOM measurement for the sliding indicator, window scroll listeners for compaction, dynamic CSS injection for responsive breakpoints, and layout animations for morphing dropdowns. None of these are achievable with native Framer tools.
Can Girgin
