Liquid Metal Navbar

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

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, or send it over. I’d love to see what you create.

Need help?

Questions or feedback? Reach me anytime: [email protected] or on X @Matthias_Oel.

Need a matching component?

Pair it with Liquid Metal Button+ or Liquid Glass Nav Pro.

Explore all components →