MDX_DocMenu

Navigation in its most physical form.

Get MDX_DocMenu

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