---
title: "MDX Ferris Wheel — Framer component · Best of Framer"
description: "$19.00 · Framer component · by MODAX · Navigation. Circular Navigation Engine"
canonical: "https://framer.elliotli.dev/component/mdx-ferris-wheel"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/MDX Ferris Wheel

# MDX Ferris Wheel

Circular Navigation Engine

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

![MDX Ferris Wheel preview image 1](https://framer.elliotli.dev/og/component/mdx-ferris-wheel/600112ac93c54d9e/1600x1200.jpg)

## Summary

Circular Navigation Engine

## Description

### MDX\_FerrisWheel is a premium circular navigation engine designed to replace traditional menus with an immersive, interaction-driven system.

Transform your navigation into an immersive, interactive experience with 4 stunning visual effects, drag-to-position, and full keyboard accessibility. Elevate your navigation experience with MDX\_FerrisWheel — where form meets function in perfect orbit. 🎡

### ✨ At a Glance

🎡 **Ferris Wheel Layout**: Items orbit around a central hub in a natural, circular pattern✨ 4 Stunning Hub Effects:

1.  Supernova — high-energy radial pulse
    
2.  Angelic Halo — elegant premium glow
    
3.  Photon Rings — futuristic rotating layers
    
4.  Quantum Field — organic particle motion
    

These are not decorative add-ons—they define the emotional tone of the interface.

🖱️ **Drag-to-Position:** Freely draggable hub with intelligent edge snapping

📂 **Hierarchical Groups:** Create nested menus with unlimited depth

🔄 Auto-Rotation: Wheel spins automatically when open (configurable speed)

🌓 **Smart Theme System:** Light/Dark/Auto modes with separate accent colors

**⌨️ Full Keyboard Navigation:** Complete accessibility for keyboard-only users

📱 **Responsive Design:** Automatically adapts to mobile screens (≤480px)

📳 **Haptic Feedback:** Subtle vibration on supported mobile devices

### 🚀 Quick Start (3 Minutes)

-   Drag MDX\_FerrisWheel onto your Framer canvas
    
-   Add your menu items in the Items property panel
    
-   Set your brand logo and accent colors in Brand and Theme
    
-   Choose your favorite hub effect in Visual DNA → Hub Effect
    

### 🎮 Keyboard Navigation — No Mouse Needed Navigation

↑ Arrow Up → Open the menu ← Arrow Left → Cycle to previous item

→ Arrow Right → Cycle to next item

⏎ Enter / Space → Select current item

↓ Arrow Down → Close menu / Go back

🏠 Home Key → Return to root-menu instantly

### 📂 Creating Hierarchical Menus (The Right Way)

### Step 1 Add Top-Level Items (Products, Services, About)

-   Add the first top-level item **Products**:
    
    1.  isGroup: true
        
    2.  Group ID: "Products"
        
    3.  Parent ID: "root"
        

-   Next add the second top-level item **Services:**
    
    1.  isGroup: true
        
    2.  Group ID: "Services"
        
    3.  Parent ID: "root"
        

-   Next add the third top-level item **About**
    
    1.  isGroup: false
        
    2.  Label: "About"
        
    3.  Parent ID: "root"
        

### Step 2 Add Items Inside "Products"

-   Add the first item **Components**
    
    1.  isGroup: false
        
    2.  Label: "Components"
        
    3.  Parent ID: "Products"
        

-   Add the second item **Plugins**
    
    1.  isGroup: false
        
    2.  Label: "Plugins"
        
    3.  Parent ID: "Products"
        

### Step 3: Create Nested Group Inside "Products"

-   Add the first item **Software**
    
    1.  isGroup: true
        
    2.  Group ID: "Software"
        
    3.  Parent ID: "Products"
        

Then add items inside "**Software**":

-   Add the first item **Web Apps**
    
    1.  isGroup: false
        
    2.  Label: "Web Apps"
        
    3.  Parent ID: "Software"
        
-   Add the second item **Mobile Apps**
    
    1.  isGroup: false
        
    2.  Label: "Mobile Apps"
        
    3.  Parent ID: "Software"
        

### 🎬 How Navigation Works

**Action:** Click **Products** (folder)

**Results:** Wheel shows Components, Plugins, Software

**Action:** Click **Software** (folder)

**Results:** Wheel shows Web Apps, Mobile Apps

**Action:** Click **Central Hub** button

**Results:** Returns to previous level

**Action:** Click **Home** Icon on **Central Hub** button

**Results:** Returns to root-menu

### 📋 Complete Property Reference

At its core is a draggable central hub with orbiting items that rotate smoothly, creating a natural exploration flow. Navigation becomes spatial and intuitive rather than linear.

-   Circular orbit-based navigation
    
-   Smooth rotational interaction model
    
-   Central hub as interaction anchor
    

### Hierarchical Navigation System

Build complex structures with unlimited nesting while maintaining clarity.

-   Groups, sub-groups, and deep nesting
    
-   Parent-child relationships via group IDs
    
-   Supports both simple and complex architectures
    

### Interaction System

-   **Drag-to-position hub**
    
    -   Local mode (within component)
        
    -   Global mode (viewport freedom) • Edge snapping for controlled placement • Optional auto-rotation with speed control • Haptic feedback on supported devices
        
-   Keyboard Access↑ to open, ←/→ to cycle items, Enter/Space to select,
    
    ↓ to close/go back, Home to return to root
    

### Theme System

-   Auto (system / Framer theme sync) • Manual Light & Dark modes Independent control of:
    
    -   Text colors
        
    -   Accent colors • Supports hex, RGB, and CSS variables
        

### Responsive Behavior

-   Adaptive layout for mobile (≤480px)
    
-   Scaled hub and orbit spacing
    
-   Touch-optimized interactions
    

### Performance

-   GPU-accelerated transforms
    
-   Memoized rendering (useMemo / useCallback)
    
-   requestAnimationFrame-driven motion
    
-   Stable 60fps animation pipeline
    

### Accessibility

-   Full keyboard navigation
    
-   ARIA roles and labels
    
-   Focus management and indicators
    
-   Reduced motion support
    
-   Screen reader compatibility
    

### Navigation Capabilities

**Each item supports:**

-   External links (URL)
    
-   Section-based scrolling - Disabled due to Framer restrictions
    
-   Smooth or instant scroll modes
    
-   Open in new tab option
    

### Use Cases

-   Portfolio navigation systems
    
-   Product category explorers
    
-   Interactive dashboards
    
-   Brand-centric microsites
    
-   Creative agency presentations
    

## Why It Matters

**MDX\_FerrisWheel** is not just a menu—it is a navigation experience. It transforms a functional requirement into a visual centerpiece that communicates brand quality, creativity, and interaction depth instantly.

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

-   All · #8696

## Details

- **Author**: MODAX
- **Price**: $19.00
- **Published**: 2026-04-27
- **Updated**: 2026-04-27
- **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