MDX_OrbitNav

MDX_OrbitNav turns a compact circular menu hub into a full-screen navigation experience. Visitors open the hub to explore destinations arranged around an interactive orbit, preview group information and move through your site without a conventional dropdown.

Place the hub naturally inside a Framer header, embed it within a section, or pin it to a viewport corner. Choose from Obsidian, Frost and Aurora glass styles, add a branded hub logo, and select subtle or expressive motion effects.

Discovery Stage adds more meaning to each destination. Show a headline, supporting description, optional image and featured link for the main menu or an individual group. On desktop, Discovery appears beside the orbit; on smaller screens, it adapts to a compact layout.

Nested groups, Smart Labels, orbital pagination, keyboard interaction, Framer typography controls and English/Arabic/Urdu interface options are included. The circular structure stays consistent across desktop, tablet and mobile.

Insert MDX_OrbitNav into your Framer header Stack, select Placement > Mode > Header Slot, and choose Left, Center or Right alignment. Use Header X Inset and Header Y Inset to adjust spacing. The same visible-edge spacing is respected as the header adapts to tablet and phone layouts.

For an icon-style header menu, keep Menu Hub > Show Label off. If you prefer a visible label, choose Header Label > Auto so it sits beside the hub where space permits. Keep the header's overflow visible to prevent the closed-hub effects from being cut off.

Place the hub inside a Framer section, card or custom composition. Its position follows the surrounding layout, while opening it reveals the full navigation experience.

Pin the hub to the Top Right, Top Left, Bottom Right or Bottom Left. Adjust its Horizontal and Vertical offsets to suit the design.

Choose Glass Design > Preset to select Obsidian, Frost or Aurora, then optionally customize the accent color. Menu Hub > Live Hub FX styles the closed trigger, while Open Reveal controls the opening animation. Adjust orbit depth, optional dragging and Auto Spin independently.

The closed hub is responsive by default: 64px desktop, 56px tablet and 48px mobile. A Fixed sizing option is also available.

Visitors can select destinations by tapping or clicking the orbit. They can also drag the ring when Drag Orbit is enabled, open groups, follow breadcrumbs and use Back to return to the previous group.

Keyboard controls are intentionally simple:

• Left / Right: Move counterclockwise or clockwise through orbital destinations.
• Enter / Space: Activate the selected destination.
• Escape: Return to the parent group or close the menu at the root.
• Tab / Shift+Tab: Move between menu controls.
• Home / End: Move to the first or last destination on the current orbital page.
• PageUp / PageDown: Move between orbital pages when pagination is available.

Up / Down do not change orbital selection. The component also respects visitors' reduced-motion preferences. Smart Labels keep the orbit concise without changing full destination names used for navigation and assistive text.

• Keep your header responsive. Use appropriate Framer width constraints at desktop, tablet and mobile breakpoints. Header Slot keeps the hub visible but does not resize the rest of your header.
• Avoid clipped hub effects. Set the parent header's Overflow to Visible when using Embedded or Header Slot placement.
• Use short orbit names. Smart Labels are enabled by default, and Orbit Label lets you provide a custom short name while keeping the full destination title intact.
• Give groups useful context. Short summaries and a clearly labeled featured link make Discovery more valuable than an ordinary list of pages.
• Set section targets carefully. Section IDs should match existing IDs on the current page; enter them without the leading `#`. If a sticky header covers section headings, set Section Offset to the header height (for example 88 px). The same offset applies to every Section destination, while URL links remain unaffected.
• Preview all three breakpoints. Confirm the hub, Discovery content and pagination on desktop, tablet and mobile.
• Check localized fonts. Select fonts that display all characters used in your Arabic, Urdu or other-language text.
• Use one main menu. One primary OrbitNav in your shared header is the simplest setup for most websites.

Give each destination a simple symbol that suits your site's visual style. In Framer, open Destinations, select an item and paste one character from the collections below into Symbol. No icon library is required. If you add a destination Image, it appears instead of the symbol.

• Sparks and highlights: ✦ ✧ ✶ ✷ ✳ ✴ ❋ ❖
• Geometry: ◈ ◇ ◆ ◊ ◎ ◉ ◌ ◐ ◑ ◒ ◓
• Tiles and modules: ▣ ▦ ▧ ▤ ▥ □ ▢ ▫ ◻ ⊞ ⊟
• Emphasis: ★ ☆ ✪ ✫ ✬ ✭ ✮

• Arrows: ← → ↑ ↓ ↗ ↖ ↘ ↙ ↔ ↕
• Directional: ➜ ➝ ➞ ➤ ➔ ➥ ➦ ↪ ↩
• Controls: ☰ ☷ ⋮ ⋯ ⌂ ⌘ ⌖ ⊕ ⊖ ⊗
• Rotation: ↻ ↺ ⟳ ⟲ ⇄ ⇆

• Creative: ✎ ✐ ✑ ✂ ✄ ✤ ❂ ❀
• Writing and editorial: ¶ § ☷ ≡ ≣ ※ ⁂
• Media: ▶ ▷ ◀ ◁ ▸ ▹ ■ □
• Information: ⓘ ? ! + − ×

• Confirmation: ✓ ✔ ☑ ☐ ✕ ✖
• Connection: ♧ ♢ ♤ ♡ ⚯ ∞ ⌁
• Accents: • · ○ ● ◦ ◉ ◎
• Contact and external links: @ ✉ ☎ ↗ ⇗ ⌁

• Home: ⌂
• Studio or About: ◐
• Projects or Portfolio: ◈
• Products or Components: ▦
• Services: ✦
• Explore group: ◎
• Resources group: ▧
• Articles or Journal: ✎
• Contact: ↗
• FAQs: ?
• Settings or Utilities: ⌘
• Featured: ✳

• Choose symbols with similar weight and style for a balanced orbit.
• Preview your chosen symbols with your Navigation Font on desktop and mobile; some fonts lack particular characters or render them at different sizes.
• For consistent appearance, prefer monochrome symbols. Emoji colors and shapes may vary by device.
• Keep each destination's Title clear and descriptive. The symbol is decorative; the title identifies the destination.
• For custom artwork or brand icons, use Destinations > Image instead.

Choose Header Slot for a modern hamburger-menu replacement, Fixed Corner for floating site navigation, or Embedded for navigation within a section. Turn on Discovery Stage when visitors benefit from a description or featured link before navigating. Keep Auto Spin off for conventional site navigation; use it selectively for experiential layouts.

• v1.10.17 — Rear Halo Hub Glow: Refined the expanded center hub so illumination sits behind the lens instead of washing over the text. Reduced inner and outer lens shadow strength for a cleaner premium look.