Float Bar

Dynamic and clean floating nav 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 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 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.

Dynamic and clean floating nav bar