Float Bar

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.