POINT 01
Distinctive prism presentation.
A dimensional glass tray and responsive icon motion elevate everyday navigation.
MDX_PrismDock
V2.0.0A premium 3D prism-glass navigation dock for Framer with responsive icon magnification, elegant submenus, and precise page-section scrolling.
Overview
MDX_PrismDock turns a conventional collection of navigation links into a compact interactive dock. A sculpted translucent tray presents uploaded or URL-based icons with pointer-responsive magnification, subtle reflections, active indicators, and contextual labels. It supports Framer page links, external destinations, and scroll-to-section navigation in the same dock.
For deeper site structures, each root icon can open a single-level glass submenu with its own links, icons, and optional heading. The tray offers three size presets, theme-aware presentation, RTL navigation, and horizontal overflow controls when available width is limited.
Section navigation includes a per-item viewport-relative Scroll Offset. For example, a 30px offset keeps a target clear of a 30px fixed header; nested scrollable Framer Stacks are handled without applying that clearance twice. Optional Scroll Spy follows the sections as the visitor scrolls.
Why Choose MDX_PrismDock
POINT 02
One dock for different destinations.
Link to Framer pages, external sites, or specific sections from root and submenu items.
POINT 03
Precise section landing.
Viewport-relative offsets work for page scrolling and nested scrollable layouts.
POINT 04
Navigation that scales.
Single-level submenus and horizontal icon overflow help fit more destinations into one compact experience.
Ideal For
AUDIENCE 01
Framer designers
seeking a distinctive navigation centerpiece.
AUDIENCE 02
Product teams
combining main destinations with grouped navigation.
AUDIENCE 03
Creative agencies
showcasing immersive visual sections and case studies.
AUDIENCE 04
Documentation publishers
building chapter and category navigation.
Navigation Modes
URL and page destinations
Select URL / Page under Link Type. Choose a Framer Site Page or provide an External URL. Open in New Tab is available for this link mode.
Page-section destinations
Select Page Section and enter the target element's Section ID exactly as assigned in Framer, without `#`. Choose Smooth or Instant scrolling and optionally specify a per-item Scroll Offset (px).
Nested menus
Turn on Has Submenu for a root item and populate Submenu Items. Root items with submenu entries open their submenu instead of navigating directly; place the desired destinations inside that submenu. The optional Header Title defaults to the parent label when blank.
User Guide
Practical Implementation Notes
SIGNAL 01
Section IDs must match.
Section navigation uses `document.getElementById`; an incorrect or missing ID leaves no section to scroll to.
SIGNAL 02
Offsets are viewport-relative.
A 30px offset aims to place a target 30px below the viewport top. When the target lives inside a scrollable Stack already starting below that position, the component avoids adding redundant interior spacing.
SIGNAL 03
Nested submenu items remain editable.
Framer stores submenu links under `submenuEntries`. Keep this property intact when updating a deployed component.
SIGNAL 04
Overflow is intentional.
A long row of dock icons remains horizontally scrollable and reveals glass direction controls. Long vertical submenu lists reveal their additional entries through internal scrolling.
FAQ
Advanced Usage
Fixed headers and page sections
Assign the ID `features` to a target section in Framer. For a fixed header requiring 30px clearance, set Section ID to `features` and Scroll Offset (px) to `30` on that dock item. Repeat with different values for other destinations if necessary.
Full-height sections inside a scrolling Stack
Place the sections inside a Framer Stack configured with Overflow → Scroll, assign each child a unique ID, and link each dock item to its corresponding ID. Offsets remain viewport-relative rather than blindly adding space inside the Stack; the section cannot scroll beyond the container's reachable content boundaries.
Combining Scroll Spy with submenus
When Scroll Spy is enabled, section links in a submenu contribute to the active state of their parent root icon. Use Spy Offset to tune the observation threshold independently of the target landing offset.
Get MODAX Releases First
Early access to components, templates, and plugins — plus exclusive freebies and limited-time discounts.
