MODAX

Tap or click each icon to explore: the first four navigate between pages, the last four jump to sections within the current page.

MDX_DocMenu

Navigation in its most physical form.

MDX_DocMenu

V1.1.0

A premium Framer component that brings the iconic Apple macOS dock experience to the web. Featuring a glassmorphic 3D prism tray, dynamic icon magnification, smooth section navigation, and intelligent overflow handling — it replaces bulky navbars with a refined, space-efficient navigation experience.

Overview

MDX_DocMenu reimagines web navigation by eliminating the traditional navbar in favour of a compact, interactive dock inspired by Apple's macOS design language. The 3D prism tray is the centrepiece — it auto-sizes to fit the number of icons provided, gracefully switching to masked horizontal scroll when space is constrained, while keeping the full tray visible at all times. Icons magnify dynamically as the cursor approaches, providing satisfying visual feedback. Each item can navigate to an external URL, an internal Framer page, or scroll smoothly to a target section on the current page — making the component equally at home as a site-wide navigation bar or a single-page section controller.

Documentation

Site Navigation

Quick access to key sections or pages across documentation sites and knowledge bases.

Portfolio

Project Navigation

Navigate between projects, about, and contact pages with a sleek, compact dock.

SaaS

Landing Pages

Features, Pricing, Testimonials, Docs — all accessible from a single, elegant navigation point.

Corporate

Department Access

Link to departments, services, resources, and contact information.

Storytelling

Chapter Navigation

Smooth scroll between chapters, acts, or beats on editorial and narrative pages.

E-commerce

Product Exploration

Overview, Specs, Reviews, Shipping — seamless section navigation on product pages.

Education

Module Navigation

Navigate between modules, lessons, and resources on educational platforms.

Events

Schedule Access

Schedule, Speakers, Venue, Sponsors — all accessible from a persistent dock.

Features Stage

🎯

3D Prism Tray

Glassmorphic tray with 1200px perspective transform and 25px backdrop blur — auto-sizes to content, masks on overflow with hidden scrollbar.

Properties Gadget

User Guide

Step 1 of 8

Install Component:

Open your Framer project, navigate to Assets → Code → New File, paste the MDX_DocMenu.tsx source code, and save. The component appears in your Assets panel under Code Components.

Elevate Navigation with Apple-Style Dock Experience

MDX_DocMenu combines **glassmorphic 3D design**, **dynamic icon magnification**, and **dual navigation modes** — delivering a refined, space-efficient navigation experience that replaces bulky navbars across documentation, portfolios, and storytelling projects.

✓ Glassmorphic 3D prism tray with perspective transform and 25px blur for premium visual quality.

✓ macOS-style dynamic magnification with cursor proximity — entirely off the React render cycle for peak performance.

✓ Auto-sizing tray with intelligent overflow handling — graceful masked scroll when space is constrained.

✓ Dual navigation modes — URL/Page links and smooth section scrolling within a single component.

✓ Full accessibility with role="navigation", customisable ARIA label, and image alt attributes.

✓ Navigation resilience with duck-typing fallbacks — works regardless of Framer API changes.

FAQ

Get MDX_DocMenu

Get MODAX updates

New components, tips, and discounts — straight to your inbox.

Key Features & Capabilities

✦

Physically Based Interaction (PBI)

Unlike static navbars, the Doc Menu exists in a 3D space with depth, magnification, and light-bleed reflections, making navigation feel like a physical extension of the user's cursor.

✦

3D Prism Architecture

The "shelf" is not a flat rectangle; it is a 3D prism with a 72° X-axis rotation. This creates a physical "floor" for icons to sit on.

Material: Cool-tinted glass with a Gaussian blur.

Reflections: Icons cast real-time, blurred reflections onto the glass base, enhancing the sense of realism.

✦

Adaptive Magnification

The component uses a custom spring-physics curve to magnify icons as the cursor approaches.

Proximity Sensing: Icons swell organically based on cursor distance.

Liquid Motion: Transitions are governed by high-stiffness springs to prevent "mechanical" feel.

✦

The "Golden Spot" Indicator

A precision-calibrated active state dot seated at -18px on the 3D floor.

Single Source of Truth: The component intelligently manages state to ensure only one dot exists at a time.

Layout Morphing: When switching sections, the dot "slides" between icons using Framer Motion’s layoutId for a seamless transition.

✦

Smart Shelf Scaling

The component automatically detects its container width.

Desktop: Centers all items with premium side-padding.

Mobile/Small Viewports: Converts into a masked, scrollable "Smart Shelf" to ensure navigation is never cut off, maintaining accessibility without sacrificing style.

✦

Reimagines Web Navigation

MDX_DocMenu reimagines web navigation by eliminating the traditional navbar in favour of a compact, interactive dock inspired by Apple's macOS design language.

•Auto-sizing tray

•Dual navigation modes — URL/Page links

•Icon reflection

•Active indicator

•ARIA accessible

•Zero dependency

•MODAX fallback icon

One Component. Infinite Possibilities.

Explore how MDX_DocMenu adapts to every industry.

The Cinematic Anchor

Replaces the standard, static top navigation bar with a high-fidelity 3D dock. This use case leverages the 1.6x magnification to create an "Apple-inspired" entry point that signals premium quality the moment the site loads.

The Sectional HUD (Heads-Up Display)

A floating, bottom-anchored controller designed for long-form scroll pages. It acts as a physical "bridge," allowing users to jump between page sections (e.g., Features, Specs, Pricing) without losing their place in the narrative.

The Product Customizer Hub

Embedded directly within a product page to allow users to toggle between different configurations, colors, or views. The "Golden Spot" indicator provides instant feedback on the currently selected state.

The Discovery Engine Controller

Used as a companion component to manage content stacks or galleries. By linking icons to specific data sets, it allows users to "drive" the content on the screen through a tactile interface.

The Technical Documentation Shelf

A compact, nested navigation layer that organizes dense information into visual categories. This simplifies complex hierarchies by replacing text links with recognizable, high-fidelity technical icons.

Where Utility Meets Artistry

The MDX_DocMenu is more than a navigation tool—it is a statement of intent. By integrating 3D architectural depth, liquid magnification, and the precision of the "Golden Spot" indicator, you are choosing to replace the digital status quo with an interface that feels alive. Whether you are building a cinematic brand home or a complex, multi-layered sectional experience, this component provides the tactile gravity needed to keep users engaged. It is time to move beyond the flat web and give your project the physical presence it deserves.

Get MDX_DocMenu

Get MODAX Releases First

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