MDX_NavEngine

MDX_NavEngine — Premium Navigation Engine for Framer Stop fighting with nested frames and broken hover states.

MDX_NavEngine — Premium Navigation Engine for Framer The Only Navigation Component You'll Ever Need MDX_NavEngine — Premium Navigation Engine for Framer Stop fighting with nested frames and broken hover states. MDX_NavEngine is a production-grade navigation system built specifically for Framer. Drag it onto your canvas, configure everything from the Properties panel, and get a beautiful, functional navigation that works everywhere. Quick Look: What You Get 3 Menu Types: Single-column, multi-column, or icon grid — pick what fits your design or combined all Infinite Nesting: Groups inside groups inside groups. No limits. Auto Dark Mode: Follows your Framer light/dark mode automatically or Force specific theme. Glass Morphism: Frosted glass effect with blur — looks premium Mask Scroll: Gradient fades at edges — no ugly scrollbars Smooth Scroll: Section links scroll smoothly (works on mobile too) Fully Responsive: Desktop pills + mobile burger menu with accordion iOS Safe Areas: Works perfectly on notched iPhones How Easy Is It? 60 Seconds to a Working Nav Step 1: Drag & Drop Drag MDX_NavEngine onto your canvas. That's it. ⚠️ Important: Place it at the document root-level — not inside any frame or stack. This ensures Fixed positioning works correctly. Step 2: Add Your Logo Open Nav Bar in the Properties panel → Logo Source → Upload your logo (or paste a URL). Add a Compact Logo for when the nav shrinks on scroll. Step 3: Type Your Menu Items Nav Bar → Nav Items → Click the array to add items. Step 4: Pick Your Colors Visual DNA → Choose your Light/Dark colors: Surface — Background color Text — All text color Accent — Hover background, active pills, CTA color Step 5: Preview Switch to Preview mode . Hover over dropdowns. Resize to see mobile menu. Toggle light/dark mode in Framer. You're done. Properties Panel — Everything in One Place All settings are organized into 5 clean groups. No digging through nested menus. MDX_NavEngine Properties Panel Building Your Menu Structure The One Simple Rule If you want Regular Links (Pricing, Contact, Sign in) set " Has Items " to " No " For Dropdown menu set " Has Items " to " Yes " That's it. Regular Links (No Dropdown) Example: Pricing page, Contact section Label: "Pricing" Has Items: NO Goes To: "Link" (or "Page Section" for smooth scroll) URL: "/pricing" (if Goes To is set to link) Section ID: #section-id (if Goes To is set to Section) Scroll : Smooth/Instant (If Goes To is set to Section) New Tab : Yes/No (if Goes To is set to Link) Badge: Optional — "New", "Beta", etc. The pill will now navigate directly when clicked. Dropdown Menus (Has Items = YES) Example: Products menu with items inside Label : "Products" Has Items : Yes Layout : "Single Column", "Multi Column", or "Grid" Items : Click to add what goes INSIDE the dropdown Adding Items Inside a Dropdown Click the Items array. Each item can be one of two types: Clickable link - IsGroup NO, Takes the user somewhere Group header - isGroup YES , A collapsible category that contains multiple links Type 1: Clickable Link (Is Group = NO) Is Group : NO Name : "Wrist Watch" Group: Empty for root-level — OR type a group name to nest inside Goes To : "Link" or "Page Section" URL : Where it goes Hint : Optional short description (shown as hover caption or underneath the Name, based on the Visual DNA property "Show Hint: Below Item/On Hover" Icon Source : Upload/URL Icon Image : if "Icon Source" is Upload Icon URL : If "Icon Source" is URL NOTE: Icons are optional if its not a Icon Grid Menu, if provided it will show before the Name Type 2: Group Header (Is Group = YES) Is Group : YES Group Name : "CellPhones" Parent Group : Empty for root-level — OR type a parent group name to nest inside Icon Source : Upload/URL Icon Image : if "Icon Source" is Upload Icon URL : If "Icon Source" is URL Three Menu Types Single Column — Clean & Simple Groups expand inline with smooth accordion animation. Unlimited nesting depth. Best for: User accounts, settings panels, simple navigation Multi Column — Category Heavy Full-width dropdown. Each group becomes a column header. Configure up to 6 columns per row. Best for: E-commerce, documentation sites, SaaS products Icon Grid — Visual Navigation Card-based layout with icons. Three sizes: Small (80px), Medium (110px), Large (140px). Best for: Integration directories, app launchers, partner ecosystems Placement: Top vs Bottom MDX_NavEngine works at both the top and bottom of the viewport. Everything flips automatically. Placement Top - Top of viewport, Opens downward Placement Bottom - Bottom of viewport, Opens upward What happens in Bottom placement: Navbar sticks to bottom of screen, Dropdowns Open upward. Announcement bar appears below navbar. Compact on scroll, compacts when scrolling UP. Mobile Experience Below 810px (or when burger is clicked on desktop): Pills - Hidden automatically Burger button - Appears Menu - Slides in from the right Navigation - Vertical accordion CTAs - Primary + Secondary at bottom Scroll lock - Page behind cannot scroll Safe areas - Works on notched iPhones Accessibility Screen readers - ARIA labels on all interactive elements Keyboard navigation - Tab, Enter, Escape support Focus management - Focus trap in mobile menu Common Questions Q: Does this work with my existing font? A: Yes. The component inherits font from its parent frame. Change your frame's font in Framer's text properties. Q: Can I change the hover effect? A: Yes. Q: How many nav items can I have? A: Unlimited. Long menus scroll. Q: Can I have nested groups inside nested groups? A: Yes. Unlimited nesting depth. Q: Does the mobile menu close when I click a link? A: Yes. Q: What if Fixed Position isn't staying fixed? A: Check if any parent has transform, filter, or perspective. Toggle the page container's padding-top. This is a Framer rendering quirk — your component is correct. Ready to Build? "This component saved me days of work. The multi-column dropdown alone is worth the price." "Finally — a navigation component that actually works."

Hybrid navigation engine for Framer