---
title: "Float Bar — Free Framer component · Best of Framer"
description: "Free Framer component · by Lune Design · Navigation. Dynamic and clean floating nav bar"
canonical: "https://framer.elliotli.dev/component/float-bar"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Float Bar

# Float Bar

Dynamic and clean floating nav bar

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

![Float Bar preview image 1](https://framer.elliotli.dev/og/component/float-bar/0f2290c67a0821df/1600x1200.jpg)

## Summary

Dynamic and clean floating nav bar

## Description

## 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 Palettes**Built-in light and dark styles for effortless integration into any design system.

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

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

**Smooth Interactions**Subtle hover animations and polished transitions create a responsive, premium experience.

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

**Lightweight & Snappy**Designed 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](https://framer.com/remix/605tbnc5ueG16hyXqYps) 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.](https://x.com/aliceinnny/)

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

-   All · #3534

## Details

- **Author**: Lune Design
- **Published**: 2026-06-18
- **Updated**: 2026-06-07
- **Added**: 2026-05-27
- **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