→ Jordan McKenzie
→ Animated Apple-Style Dock Navigation Bar

Animated Apple-Style Dock Navigation Bar

Recreate the iconic macOS dock experience for your web projects with this fully functional navigation bar featuring realistic magnification and bounce animations.

This Example is contributed by Jordan McKenzie, on 27-Feb-2025. It is responsive. similar terms for this example are Transitions,simulation,copy,dummy,miniature,like

Animation Mockup Navigation

Author Jordan McKenzie

Fork Fullscreen

<div class="dock-container">
 <ul class="dock">
 <li class="dock-item">
 <a href="#">
 <img src="https://cdn-icons-png.flaticon.com/512/0/747.png" alt="Home">
 Home
 </a>
 </li>
 <li class="dock-item">
 <a href="#">
 <img src="https://cdn-icons-png.flaticon.com/512/3095/3095583.png" alt="Messages">
 Messages
 </a>
 </li>
 <li class="dock-item">
 <a href="#">
 <img src="https://cdn-icons-png.flaticon.com/512/1250/1250680.png" alt="Photos">
 Photos
 </a>
 </li>
 <li class="dock-item">
 <a href="#">
 <img src="https://cdn-icons-png.flaticon.com/512/5968/5968853.png" alt="Music">
 Music
 </a>
 </li>
 <li class="dock-item">
 <a href="#">
 <img src="https://cdn-icons-png.flaticon.com/512/2991/2991195.png" alt="Store">
 Store
 </a>
 </li>
 <li class="dock-item">
 <a href="#">
 <img src="https://cdn-icons-png.flaticon.com/512/900/900763.png" alt="Calendar">
 Calendar
 </a>
 </li>
 <li class="dock-item">
 <a href="#">
 <img src="https://cdn-icons-png.flaticon.com/512/3342/3342137.png" alt="Settings">
 Settings
 </a>
 </li>
 </ul>
</div>

Related Examples

Interactive Growing Underline Link Effect
Create elegant link hover effects with a growing underline animation that expands from center or left to right when users hover over your navigation links.

Author:
Anonymous

3 months ago
Gradient Morphing Card with 3D Hover Effect
Elegant floating card component with dynamic gradient animation and smooth 3D hover interactions, perfect for showcasing premium content or user profiles.

Author:
Anonymous

4 months ago
3D Card Showcase with Mouse Movement Effects

Author:
Oliver

4 months ago
Interactive Hover Effect Navigation Links
A modern, animated list of links with smooth hover effects perfect for navigation menus, resource pages, or sidebar components.

Author:
Alexandra Sinclair

3 months ago
Glassmorphism Dashboard Card Component

Author:
Prajwal Hallale

3 months ago
Product Grid for Ecommerce Website
Premium product grid with hover animation

Author:
Anika

4 months ago
Realistic Mac Terminal Mockup
A responsive Mac terminal mockup that simulates the appearance and functionality of a macOS terminal with typing effects and command execution.

Author:
Morgan Reynolds

2 months ago
Social Media Icon Buttons with Animated Tooltips
A set of social media icon buttons for Facebook, Twitter, and Instagram with platform name tooltips that appear on hover. Features smooth transitions, scale effects, and rounded corners for a polished look.

Author:
Marcus Hendricks

2 months ago
Navbar

Author:
Anonymous

3 months ago
Features list with icons

Author:
Jordan McKenzie

3 months ago
Classic Retro Button Collection
A collection of nostalgic button designs reminiscent of early web and software interfaces from the 90s and early 2000s.

Author:
Anonymous

3 months ago
Interactive Service Cards with Floating Elements
Professional feature presentation cards with 3D transitions and interactive elements for high-end product displays

Author:
Prajwal Hallale

4 months ago

Didn't find component you were looking for?

Search from 500+ components