MDX_WheelNav

MDX_WheelNav brings a different interaction model to website navigation. A compact hub sits inline in a header or at a chosen viewport corner. Selecting that hub opens a centered Ferris wheel-style navigation stage without requiring the wheel to fit inside the hub's original layout frame.

Visitors can tap a destination directly, rotate the wheel to bring a cabin into focus, or use the boarding station to open the focused destination. Groups open nested wheels; page links navigate to destinations; and section links scroll to named sections with a configurable offset.

The component includes three wheel styles, adaptive light and dark themes, a customizable hub, word-safe responsive cabin labels, bounded boarding-station typography, optional RTL text presentation, and viewport-safe boarding-station descriptions. It is designed as a functional alternative to conventional hamburger-menu navigation rather than a purely decorative animation.

• Tap a gondola to activate its destination immediately or open its submenu.
• Drag the wheel surface to rotate; release to snap a cabin to the boarding position.
• Scroll over the wheel to change the focused cabin.
• Choose Open or Open Group or Jump at the boarding station to activate the cabin currently in focus.
• Use the navigation header to go Back inside a submenu, or the X button to close the stage.

• Left and Right arrows move focus between cabins in the current set.
• Up and Down arrows switch between cabin sets when more than one exists; Page Up and Page Down work too.
• Enter or Space activates the focused destination using the appropriate native control.
• Backspace returns to the previous group; Home returns to the root menu.
• Escape closes the stage. Tab moves through available controls inside the open menu.

MDX_WheelNav includes 32 locally rendered SVG symbols for both the Hub and individual Destinations. In Framer, choose Hub > Symbol or Destinations > Icon Source > Symbol, then select an entry in the Symbol dropdown. The characters below match the dropdown's visual cues; the actual rendered SVG artwork is more detailed. These identifiers describe the built-in choices and are not image URLs or free-text symbol inputs.

• ⌂ Home — `home`
• ☰ Menu — `menu`
• ◈ Compass — `compass`
• ◎ Globe — `globe`
• ⌕ Search — `search`
• ↗ Link — `external`
• ↩ Return — `return`
• ⓘ Info — `info`

• ▦ Grid — `grid`
• ▤ Layers — `layers`
• ▱ Folder — `folder`
• ▤ Document — `file`
• ▯ Book — `book`
• ▥ Template — `template`
• ▤ Ticket — `ticket`
• ◇ Puzzle — `puzzle`

• ✧ Sparkles — `sparkles`
• ◐ Palette — `palette`
• ◉ Camera — `camera`
• ▷ Play — `play`
• ▭ Monitor — `monitor`
• ☆ Star — `star`
• ϟ Energy — `zap`
• ♡ Heart — `heart`

• ✉ Mail — `mail`
• ☏ Contact — `contact`
• ♙ User — `user`
• ▢ Bag — `bag`
• ▣ Briefcase — `briefcase`
• ⚙ Settings — `settings`
• ♢ Shield — `shield`
• § Legal — `legal`

• Aurora: `sparkles` (✧ Sparkles).
• Glass Atelier: `layers` (▤ Layers).
• Cinematic Escape: `camera` (◉ Camera).

For a custom brand icon not represented by these symbols, select Image and upload it using Framer's native image control, or select Glyph for a text character or emoji. The built-in Symbol dropdown deliberately stays compact; it is not a full Lucide icon library.

Each entry under Destinations has an optional Short Description. It appears only at the boarding station under the destination name, never inside a gondola, and works for groups, section links, and page links. Keep it concise: the description is limited to two visible lines with an ellipsis when needed. The action remains in its own column, and the wheel reserves space for the station to avoid pushing the footer outside the viewport. An empty description retains the Enter/Space instruction; scrolling errors still take precedence. Both the title and description occupy constrained rows inside a station with fixed height throughout the menu, so changing focus does not resize the wheel area. Font choices are clamped within readable ranges; the full destination name remains in the native title and accessible name. Text is rendered as plain React content rather than interpreted as HTML.

The Typography group provides four Framer-native font controls: Navigation Header, Cabin Labels, Boarding Title, and Boarding Description. Designers can select typeface and typography settings while the component caps font size and line height within each region to keep cabin spacing and the boarding station stable. Exceptionally long labels and descriptions use two-line clipping instead of changing station height. Full label text is retained for accessibility and displayed in the hover title attribute.

Text Direction uses Auto by default and follows an available page-level `dir` or computed direction. LTR and RTL overrides are available when required. RTL affects the text presentation and order inside the navigation header and boarding station, plus footer text; the wheel structure, cabin positions, and keyboard navigation are not reversed. Framer site-level RTL settings are also recommended for the rest of the page.

Use the Light Theme Logo and Dark Theme Logo controls when each site theme needs a different hub asset. Shared Logo acts as a fallback; the selected Hub Symbol appears when no valid uploaded logo is available. Auto theme follows detectable website theme signals with system preference as a fallback, and the Canvas Preview override is editor-only.

When selecting a Section destination, prefer Section Link in the Framer link picker. If using Section ID instead, match the actual Scroll Section ID on the page without the leading `#`. Increase Scroll Offset when a sticky header would otherwise cover the target content. Missing target IDs are reported in the boarding station instead of failing silently.

Soft Pulse and Rim Turn use the selected pulse colors around the hub rather than changing the uploaded logo. Auto Step is independent of the hub's idle motion. Use Resume After (s) to control when automatic cabin advancement returns following visitor interaction.

Framer Canvas renders the hub as an intrinsically sized static element. Fixed Corner uses viewport positioning in Preview and on the published site; for accurate Canvas placement use Framer's native layer positioning. The entire viewport stage is intentionally not displayed on static Canvas.

Use Inline when: You are placing the hub inside a custom header or navigation layout.

Use Fixed Corner when: You want the trigger to stay anchored to a chosen screen corner on the published page.