---
title: "MDX_NavEngine — Framer component · Best of Framer"
description: "$49.00 · Framer component · by MODAX · Navigation. MDX_NavEngine — Premium Navigation Engine for Framer Stop fighting with nested frames and broken hover states."
canonical: "https://framer.elliotli.dev/component/mdx-navengine"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/MDX\_NavEngine

# MDX\_NavEngine

Advanced Navigation Engine

[View on Framer](https://framer.com/marketplace/components/mdx-navengine/?via=elliot-li)

![MDX\_NavEngine preview image 1](https://framer.elliotli.dev/og/component/mdx-navengine/34adb5c2343cbdf5/1600x1200.jpg)

## Summary

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

## Description

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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-be3tq3d4-mVGWieFfNAmdjQ3XMyDt4afI49HEPc)![MDX\_NavEngine Properties Panel](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-be3tq3d4-l2HnjL3N3OSMahVKz7DFTC8qQLdeWY)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:

1.  **Clickable link -** IsGroup **NO,** Takes the user somewhere
    
2.  **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.

1.  **Placement Top** - Top of viewport, Opens downward
    
2.  **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."_

## Rank history [How rankings work →](/terms#rankings)

-   All · #6848

## Details

- **Author**: MODAX
- **Price**: $49.00
- **Published**: 2026-04-27
- **Updated**: 2026-10-09
- **Added**: 2026-04-02
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation