---
title: "Liquid Kinetic Nav — Free Framer component · Best of Framer"
description: "Free Framer component · by Abishek M · Navigation. The Liquid Kinetic Nav: Key Features Apple-Inspired Liquid Aesthetic: Features deep, multi-layered glassmorphism powered…"
canonical: "https://framer.elliotli.dev/component/liquid-kinetic-nav"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Liquid Kinetic Nav

# Liquid Kinetic Nav

Apple-inspired liquid glass navigation

[View on Framer](https://framer.com/marketplace/components/liquid-kinetic-nav/?via=elliot-li)

![Liquid Kinetic Nav preview image 1](https://framer.elliotli.dev/og/component/liquid-kinetic-nav/33069172070f69ec/1600x1200.jpg)

## Summary

The Liquid Kinetic Nav: Key Features Apple-Inspired Liquid Aesthetic: Features deep, multi-layered glassmorphism powered by GPU-accelerated backdrop filters for a premium "wet"…

## Description

### The Liquid Kinetic Nav: Key Features

-   **Apple-Inspired Liquid Aesthetic**: Features deep, multi-layered glassmorphism powered by GPU-accelerated backdrop filters for a premium "wet" look.
    
-   **Advanced Kinetic Magnetics**: Nav items exert a subtle magnetic pull on the cursor using custom spring physics, creating a tactile and responsive interface.
    
-   **Haptic Interaction Feedback**: Provides physical confirmation on click with a haptic scale-down effect (0.98x), making digital interactions feel grounded.
    
-   **Thumb-Zone Optimized Mobile Layout**: Overhauls traditional mobile menus with a floating expansion system designed for one-handed ergonomics.
    
-   **WCAG 2.1 AA Accessibility**: Includes built-in contrast logic that automatically adjusts text and icon colors to ensure legibility in any theme.
    
-   **Performance-Aware Rendering**: Features a "Low-Power Mode" toggle that scales backdrop blur on mobile devices to save battery while maintaining high frame rates.
    
-   **Full Component Control**: Complete customization via the Framer sidebar, including magnetic strength, spring stiffness, haptic intensity, and corner radius.
    
-   **Dynamic Lucide Icon Integration**: Supports the entire Lucide icon library—simply type the icon name to update your navigation visuals.
    
-   **Native Framer Linking**: Each item supports native link properties for seamless connection to internal project pages or external URLs.
    
-   **Constraint-Ready Design**: Built-in logic handles long text labels gracefully with automatic ellipsis to prevent layout breaks.
    

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

-   All · #3346

## Details

- **Author**: Abishek M
- **Published**: 2026-05-29
- **Updated**: 2026-05-30
- **Added**: 2026-05-15
- **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