---
title: "Mac Dock Navigation — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Ankur pareek · Navigation. Apple Styled Dock Navigation"
canonical: "https://framer.elliotli.dev/component/mac-dock-navigation"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Mac Dock Navigation

# Mac Dock Navigation

Apple Styled Dock Navigation

[View on Framer](https://framer.com/marketplace/components/mac-dock-navigation/?via=elliot-li)

![Mac Dock Navigation preview image 1](https://framer.elliotli.dev/og/component/mac-dock-navigation/a6479981b91eab9f/1600x1200.jpg)

## Summary

Apple Styled Dock Navigation

## Description

[Preview link](https://individual-yak-943353.framer.app/)

Apple-style dock navigation component is a sleek, premium, and highly interactive navigation dock designed for modern web applications, creative portfolios, or personal websites. Drawing inspiration from macOS-style docks, it blends contemporary glassmorphism with playful, high-fidelity 3D and flat iconography to create an intuitive and engaging user experience.

### **Key Features**

-   The #1 ❣ feature is that the dock navigation can be positioned in all 4 directions: TOP, BOTTOM, LEFT, RIGHT, with proper label and active indicator directions.
    
-   Dynamic Magnification Effect: The dock features a smooth, fisheye-style hover expansion. When a user hovers over an item, the target icon scales up fluidly and elevates above the dock's baseline, providing instant visual feedback.
    
-   Clean Tooltips: Elegant, minimalist text tooltips appear seamlessly above the active icon upon hover, ensuring clarity without cluttering the interface.
    
-   Sleek Glassmorphism Base: The container is a dark, translucent floating bar with heavily rounded corners, a subtle inner border highlight, and soft drop shadows that give it a distinct sense of depth and separation from the background.
    
-   Smart Layout Segmentation: Subtle vertical divider lines elegantly categorize the navigation workflow into logical sections (Core Navigation, Content/Interactions, and Communication/Socials).
    
-   Active page Indicator.
    

**Ideal Use Cases**

This component is perfect for creative developers, UI/UX designers, portfolio pages, dashboards, and modern SaaS platforms looking to replace traditional, rigid top-navigation bars with a tactile, desktop-class interface that rewards user interaction.

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

-   All · #4202

## Details

- **Author**: Ankur pareek
- **Price**: $8.00
- **Published**: 2026-07-10
- **Updated**: 2026-07-10
- **Added**: 2026-07-10
- **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