5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/05lj3a0qaa006.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/382a8k30zyobj.js","/creators-assets/_next/static/immutable/chunks/368p63l4oh_7-.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/228u8o-g1d1_g.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/413kuej600yyw.js","/creators-assets/_next/static/immutable/chunks/02hyzon6wywme.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tb66,

About this Component

A modern floating navigation bar built for Framer — clean, responsive, and designed to blend seamlessly into any project. Featuring dual light and dark palettes, smooth interactions, and a polished floating layout, this component delivers a premium navigation experience right out of the box.

Crafted with flexibility in mind, every part of the navigation is easily customizable, from colors and spacing to icons and links. Lightweight, snappy, and optimized across devices, it’s ideal for landing pages, portfolios, SaaS products, and modern web experiences.

Features

Dual PalettesBuilt-in light and dark styles for effortless integration into any design system.

Modern Floating DesignMinimal floating navigation with soft spacing, clean layering, and a refined visual feel.

Responsive by DefaultOptimized for desktop, tablet, and mobile layouts with smooth adaptability across screen sizes.

Smooth InteractionsSubtle hover animations and polished transitions create a responsive, premium experience.

Fully CustomizableEasily adjust colors, icons, spacing, typography, blur, borders, and navigation links directly in Framer.

Lightweight & SnappyDesigned to feel fast and fluid without unnecessary complexity.

Customization

The component is fully customizable through Framer properties:

Light & dark palette switching
Navigation links and labels
Icons and active states
Background blur, borders, and corner radius
Padding, spacing, and layout sizing
Hover and interaction styles
Mobile responsiveness settings

Perfect For

SaaS websites
Personal portfolios
Startup landing pages
Creative agencies
Product showcases
Modern web apps

Includes

Floating navigation component
Dual palette support (light & dark)
Responsive layouts
Smooth built-in animations
Easy-to-edit properties and styles

Tip

Use the remix link instead of copying the component directly. This preserves all built-in interactions, responsive behavior, and pre-configured styles — making customization much easier inside Framer.

You’ll also be able to quickly edit global colors, navigation items, spacing, and palettes without digging through nested layers.

For support, DM me at @aliceinnny.

5a:[["$","$L5d",null,{"post":{"id":"019eda3a-2061-7b31-b522-5afd59ff0785","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","slug":"lunedesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","followed":false,"followsYou":false},"media":[],"resources":[{"id":"dTct9dSfv1d3NRfKIDnn","resolved":true,"title":"Float Bar","body":"$5e","bodyJson":null,"introduction":"Dynamic and clean floating nav bar","slug":"float-bar","author":{"framerUserId":"f4c785ba-38c2-4383-ab10-e32d676b4c7e","name":"Lune Design","slug":"lunedesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f4c785ba-38c2-4383-ab10-e32d676b4c7e/ipchm7a7","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/dTct9dSfv1d3NRfKIDnn/float-bar-gnX8A9M7OyY45pFN8hKpRa90IFA8GR","metadata":{"tint":{"h":210,"s":13,"l":24},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-27T05:38:24.154Z","updatedAt":"2026-06-07T19:50:03.127Z","publishedAt":"2026-06-18T10:15:03.009Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/Floating-Navigation-8mcO7f.js@HSyy8mfD1TaUgYngZKD1","previewUrl":"https://floatingnavigation.framer.website","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"HSyy8mfD1TaUgYngZKD1","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-18T10:15:03.009Z","updatedAt":"2026-06-18T10:15:03.009Z","reported":false}}],"$L5f"]

Suggested for you