---
title: "AeroNav 3D — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Ishan Patra · Navigation. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/aeronav-3d"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/AeroNav 3D

# AeroNav 3D

[View on Framer](https://framer.com/marketplace/components/aeronav-3d/?via=elliot-li)

![AeroNav 3D preview image 1](https://framer.elliotli.dev/og/component/aeronav-3d/1e936c19081e335f/1600x1200.jpg)

## Summary

AeroNav 3D.

## Description

AeroNav 3D Setup

**Instructions**

_Watch the video below for a full walkthrough of how to use AeroNav 3D._

1.  **Drag & Drop:** Simply drag the AeroNav 3D component onto your canvas.
    
2.  **Link Sections:** For "Section" links, make sure the sectionId (e.g., #home) matches the id of the corresponding frame on your page. You can set a frame's id in the "Code Overrides" section of the properties panel.
    

**Customize:** Use the properties panel to adjust colors, fonts, positioning, and more to match your design.  
  
**Description**

AeroNav 3D replicates the elegant, frosted-glass aesthetic seen in Apple's interfaces. When users hover over the component, it tilts in 3D space, creating a subtle and engaging parallax effect that follows the cursor. The component is fully responsive, ensuring a premium look and feel on any device, and is designed to be the perfect minimal navigation for modern websites.

**Use Cases**

1.  **Portfolio Sites** - Add a premium, modern feel to showcase your work.
    
2.  **SaaS & Tech Startups** - A sleek, professional navigation experience for your product.
    
3.  **Agency Websites** - Demonstrate attention to detail and design polish to potential clients.
    
4.  **Landing Pages** - Create an engaging and memorable first impression for visitors.
    
5.  **Modern Web Designs** - The perfect final touch for any site aiming for a clean, interactive, and minimal aesthetic.
    

**Customizations**

-   **Nav Items** - Add, remove, and reorder links. Set custom labels and choose whether each link scrolls to a section or navigates to a new page.
    
-   **Light & Dark Themes** - Full control over two separate color palettes. Customize the background, text, and highlight colors for both modes.
    
-   **Positioning** - Place the navbar at the top, bottom, left, or right of the viewport with a single click.
    
-   **Typography** - Set a custom font family to match
    
    your site's branding.
    
-   **3D Tilt** - Adjust the maximum tilt angle on hover to make the effect as subtle or dramatic as you like.
    
-   **Settings Panel** - The on-screen settings panel can be enabled or disabled  
      
    **⚠️ Commercial use restrictions :**  
    \* - Sharing with third parties **who haven't bought the component** on Framer Marketplace, nor on LemonSqueezy's Framer Master's account is **PROHIBITED**
    
    \* - Use of this component in **templates**, **direct resell** or **shared link without payment** is **strictly PROHIBITED**  
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #7716

## Details

- **Author**: Ishan Patra
- **Price**: $7.00
- **Published**: 2025-08-15
- **Updated**: 2025-09-02
- **Added**: 2025-08-05
- **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