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
V1.1.0A 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 813%
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 MODAX Releases First
Early access to components, templates, and plugins — plus exclusive freebies and limited-time discounts.
