MDX_NavEngine

V1.1.0

A production-grade navigation engine component built exclusively for Framer. Delivers multi-level dropdown menus, responsive mobile overlay, theme support, flexible positioning, and in-page section navigation — all configurable directly from Framer's Properties panel without writing a single line of code.

Overview

MDX_NavEngine is a production-grade navigation engine component built exclusively for Framer. It delivers the full navigation experience that modern web products demand — multi-level dropdown menus, responsive mobile overlay, theme support, and flexible positioning — all configurable directly from Framer's Properties panel without writing a single line of code.

The component is built on a recursive group tree system that supports unlimited nesting depth, with circular reference protection ensuring the editor never crashes regardless of how menu data is structured. Dropdowns are rendered through React Portal so they always clear Framer's section z-stacking without causing layout shifts.

Beyond traditional navigation, MDX_NavEngine doubles as a powerful in-page section navigator. Every nav item and every dropdown menu item can be configured to scroll to a named section on the page — with smooth or instant scrolling — making it ideal for single-page layouts, landing pages, portfolio sites, and documentation pages that use anchor-based navigation.

Corporate

Site Navigation

Multi-level dropdown menus for large enterprise sites with departments, services, and resources.

SaaS

Landing Pages

Fixed navigation with section scrolling for hero, features, pricing, testimonials, and contact sections.

Documentation

Knowledge Bases

Multi-column dropdowns with grouped topics and sub-topics for comprehensive documentation.

E-commerce

Product Categories

Icon grid dropdowns displaying product categories with visual icons for quick browsing.

Portfolios

Project Navigation

Single-page section navigation between about, work, services, and contact sections.

Mobile

App Navigation

Bottom placement with compact scroll for mobile-first app-style interfaces.

Publishing

Content Sites

Announcement bar for promotions with dropdown navigation for categories and archives.

Startups

Product Launches

Mixed navigation — some links to external pages, others to in-page sections for storytelling.

Features Stage

📂

Recursive Group Tree

Flat item array with declarative group references — supports unlimited nesting depth with circular reference protection.

Properties Gadget

User Guide

Step 1 of 1010%

Install Component:

Open your Framer project, navigate to the Assets panel, search for MDX_NavEngine in the Marketplace, click Insert to add it to your project.

Deploy Production-Grade Navigation Without Code

MDX_NavEngine combines multi-level dropdown menus, responsive mobile overlay, theme support, and in-page section navigation — delivering the complete navigation experience modern web products demand, all configurable from Framer's Properties panel.

✓ Recursive group tree with unlimited nesting depth and circular reference protection.

✓ Three dropdown layouts — Single Column, Multi Column, and Icon Grid — each independently configurable.

✓ Portal-based dropdowns that always render above all page content without layout shifts.

✓ Intelligent hover bridge with mouse direction detection — eliminates dropdown flicker.

✓ Auto theme syncs with Framer's system theme via MutationObserver — no re-renders required.

✓ In-page section navigation on every item — transforms nav into a tab bar for single-page layouts.

✓ Production-ready with React Portal, framer-motion animations, and comprehensive accessibility.

FAQ

Get MDX_NavEngine

Get MODAX Releases First

Early access to components, templates, and plugins — plus exclusive freebies and limited-time discounts.