5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/3e6a400x7nlp5.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/3y08xhffst-nc.js","/creators-assets/_next/static/immutable/chunks/1p5p3hxx00owh.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:T260c,

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.

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."

5a:[["$","$L5d",null,{"post":{"id":"019dd08e-872b-7406-a27a-d4401d5854b6","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"1381a1da-b3be-4fec-b846-806fce7d8e9d","name":"MODAX","slug":"modax","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1381a1da-b3be-4fec-b846-806fce7d8e9d/pbf14fbi","followed":false,"followsYou":false},"media":[],"resources":[{"id":"nxskwMELlWXffRgcmL4P","resolved":true,"title":"MDX_NavEngine","body":"$5e","bodyJson":null,"introduction":"Hybrid navigation engine for Framer","slug":"mdx-navengine","author":{"framerUserId":"1381a1da-b3be-4fec-b846-806fce7d8e9d","name":"MODAX","slug":"modax","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1381a1da-b3be-4fec-b846-806fce7d8e9d/pbf14fbi","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/nxskwMELlWXffRgcmL4P/mdx-navengine-hoaIUyHfmjQAJkrdu1ZpYnjvpXDSdl","metadata":{"tint":{"h":240,"s":17,"l":64},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-02T23:06:41.859Z","updatedAt":"2026-07-04T05:23:36.828Z","publishedAt":"2026-04-27T20:08:14.891Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://modax.framer.website/framer-preview/mdx-nav-engine","price":"29","paymentUrl":"https://buy.stripe.com/3cI7sK7cP6vZ3qCcv54ZG08","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"rDoV0ft8oI81O0Z2dwId","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-27T20:08:14.891Z","updatedAt":"2026-04-27T20:08:14.891Z","reported":false}}],"$L5f"]

Suggested for you