---
title: "Liquid Metal Navbar — Free Framer component · Best of Framer"
description: "Free Framer component · by Matt · Navigation. About Liquid Metal Navbar is a responsive Framer navigation bar with flowing chrome borders and reflections that react to your cursor."
canonical: "https://framer.elliotli.dev/component/liquid-metal-navbar"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Liquid Metal Navbar

# Liquid Metal Navbar

Reflections that follow your lead

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

![Liquid Metal Navbar preview image 1](https://framer.elliotli.dev/og/component/liquid-metal-navbar/8b17978a8802a344/1600x1200.jpg)

## Summary

About Liquid Metal Navbar is a responsive Framer navigation bar with flowing chrome borders and reflections that react to your cursor.

## Description

## About

Liquid Metal Navbar is a responsive Framer navigation bar with flowing chrome borders and reflections that react to your cursor. Its pill-shaped header combines four links, rolling text hovers, an optional logo and a CTA. Light and dark variants cover desktop, tablet and phone, with an expanding two-column mobile menu. Keyboard controls and reduced-motion support are included.

## What you can customize

Native Framer layouts combine with code-powered metal effects. Customize links, labels, new-tab settings, CTA text, visibility, colors and key material settings through property controls. Edit typography and spacing on the canvas; nested controls adjust the logo, chrome palette, glow, reflections and motion. Light colors are editable in their variants. Includes a CSS fallback for WebGL. No code editing needed.

## Great for (examples)

Just a few ideas, use it anywhere a compact header with a chrome finish fits your brand:

-   Designer portfolios and personal websites
    
-   Creative agencies, studios and freelancer sites
    
-   SaaS, AI tools and app landing pages
    
-   Hardware, automotive and technology showcases
    
-   Fashion, jewelry and luxury brand websites
    
-   Music releases, gaming and experimental projects
    
-   Product launches, campaigns and waitlist pages
    
-   Minimal websites with four-link navigation
    

## Share your build

If you ship something cool with it, post it on X and tag me [@Matthias\_Oel](https://x.com/Matthias_Oel), or send it over. I’d love to see what you create.

## Need help?

Questions or feedback? Reach me anytime: [matthias@lmvision.de](mailto:matthias@lmvision.de) or on X [@Matthias\_Oel.](https://x.com/Matthias_Oel)

## Need a matching component?

Pair it with [Liquid Metal Button+](https://framer.link/xjYIgmf) or [Liquid Glass Nav Pro](https://framer.link/zLMlBIN).

[Explore all components →](https://framer.link/fsd2pgh)

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

-   All · #861

## Details

- **Author**: Matt
- **Published**: 2026-09-14
- **Updated**: 2026-10-30
- **Added**: 2026-09-14
- **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