--- title: "Holographic Menu — Framer component · Best of Framer" description: "$6.00 · Framer component · by Saif · Navigation. Holographic Menu Component for Framer Turn your navigation into an immersive 3D experience." canonical: "https://framer.elliotli.dev/component/holographic-menu" --- [Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Holographic Menu # Holographic Menu Interactive 3D menu with morphing shapes [View on Framer](https://framer.com/marketplace/components/holographic-menu/?via=elliot-li) ![Holographic Menu preview image 1](https://framer.elliotli.dev/og/component/holographic-menu/234b60d985574655/1600x1200.jpg) ## Summary Holographic Menu Component for Framer Turn your navigation into an immersive 3D experience. ## Description ## Holographic Menu Component for Framer ### Turn your navigation into an immersive 3D experience. The Holographic Menu is a premium, high-performance navigation component designed to wow your users. It combines standard DOM elements with a powerful WebGL 3D scene (using Three.js) to create a futuristic, holographic effect that is fully interactive and responsive. ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-80d8s57z-hoYVinDdfE1AP4k1exGpl46qQZA23M) ### WHY USE THIS COMPONENT? • Next-Level Aesthetics: Adds a high-end, "Awwwards" style feel to your portfolio, agency site, or creative landing page. • Fully Customizable: Control every color, font, spacing, and interaction directly from the Framer sidebar. No code required. • Performance First: Built with optimized 3D layering and createPortal to ensure it doesn't slow down your site or clip incorrectly. • Zero-Config Responsiveness: It Just Works on Mobile and Tablet, with granular override controls if you need them. ### CONFIGURATION GUIDE 1\. Menu Items Setup The core of your navigation. Add as many items as you need (recommended 4-6 for best visual impact). - Text & Number: Set the display text (e.g., "Home") and an optional index number (e.g., "01."). - Link: Supports internal Framer pages (/about) and external URLs (https://...). - Typography: New! Full control over Font Family, Weight, Size, and Line Height for each item. - 3D Shape: Assign a shape to appear when hovering this item. Choose from Primitives (Sphere, Box, Cone, Icosahedron) or upload your own Custom .glb model. 2\. Typography & Layout (Responsive) Fine-tune the look and feel across all devices without complex breakpoints. - Font Scaling: Use the "Mobile Font Scale" (e.g., 0.5) and "Tablet Font Scale" sliders to automatically resize your massive desktop typography for smaller screens. - Padding & Spacing: Key controls for Navbar Padding X/Y and Item Spacing allow you to align the menu perfectly. - Bottom Text Font: A global typography setting for your Social Links, Copyright, Email, and Phone text. 3\. Visuals & Colors Match your brand identity with the holographic shader settings. - Menu Background: The solid color behind the menu (usually dark). - Hologram Colors: Customize the Primary Glow, Accent Color, and Highlight Flicker to create your unique look. - Shape Settings: Control the Shape Size, Rotation Speed, and Animation Duration to make the hologram feel calm or energetic. 4\. Social & Footer A complete footer solution built right into the menu. - Social Links: Add icons pointing to your profiles. Supports Custom SVG uploads that automatically inherit your color settings. - Contact Options: Toggle "Show Email" and "Show Phone" to display clickable contact links alongside your copyright text. 5\. Interactive Buttons Customizing the trigger buttons. - Open/Close Icons: Upload custom images or SVGs for the "Menu" hamburger and "Close" X buttons. - Button Styles: Radius, Padding, Background Color, and Text Color are all configurable. ### BEST PRACTICES - **Custom Models:** For optimal performance, keep your .glb files extremely low-poly (ideally under 100KB). - **No Textures/Materials:** The component applies its own holographic wireframe shader, so specific materials or textures are unnecessary. - **Topology Matters:** Since it renders as a wireframe, the edge flow of your model is what creates the visual effect. - **Centering:** Ensure your model is centered at (0,0,0) in your 3D software before exporting. - **Z-Index:** The menu renders with a high z-index (9999) to ensure it sits on top of sticky headers. - **Fonts:** Ensure the fonts you select in the Menu Items are loaded in your Framer project assets. ### MOBILE BEHAVIOR On mobile devices, the 3D scene automatically moves to the background, lowers its opacity for readability, and scales down 30% to fit narrow screens. You don't need to do anything—it happens automatically! TROUBLESHOOTING "My 3D shape isn't showing up!" - Check if you uploaded a valid .glb file. - Ensure "Shape Size" isn't set to 0. - If using a custom model, try scaling it up or down in the property controls. "The font size is too big on mobile." - Lower the "Mobile Font Scale" property (default is 0.5, try 0.4 or 0.3). ## Rank history [How rankings work →](/terms#rankings) - All · #2747 ## Details - **Author**: Saif - **Price**: $6.00 - **Published**: 2026-02-19 - **Updated**: 2026-03-08 - **Added**: 2026-02-06 - **Categories**: Navigation ## More like this - [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu - [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation - [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects - [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation