---
title: "FloatPill — Free Framer component · Best of Framer"
description: "Free Framer component · by Kunal Sharma · Cards. FloatPill is a premium Framer component that transforms your site navigation into something truly agency-level."
canonical: "https://framer.elliotli.dev/component/floatpill"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/FloatPill

# FloatPill

A frosted glass pill bar

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

![FloatPill preview image 1](https://framer.elliotli.dev/og/component/floatpill/80005779bf7c71e0/1600x1200.jpg)

## Summary

FloatPill is a premium Framer component that transforms your site navigation into something truly agency-level.

## Description

FloatPill is a premium Framer component that transforms your site navigation into something truly agency-level. A minimal floating pill sits at the bottom of your page — click any icon and a frosted glass popover card rises above it, showing your page name, subtext, description, and a custom thumbnail.

Everything adapts automatically between dark and light mode. One toggle pill and card both switch together.

**What makes it different:** Zero color flash when images load. Silky smooth spring animations. Works perfectly on desktop, tablet, and mobile. Canvas-safe — no black boxes in the Framer editor.

**Features:**

100+ built-in icons across Navigation, Social, Business, Media, Actions, and Design Tools

Dark & Light mode — pill and frosted card switch together with one toggle

Click or Hover trigger mode

2 to 5 icon slots — unused slots auto-hide from the property panel

Per icon: custom heading, subtext, description, emoji, thumbnail color, thumbnail image, and native Framer page/URL link

Native Framer Font Picker — connects to your project's text styles

Card Radius & Thumbnail Radius sliders for full shape control

Title Color & Body Color pickers

Mobile responsive — popover always centered, never overflows on any screen size

Image-first thumbnail — if you upload a photo, color and emoji are completely hidden. Zero flash, zero bleed

Spring physics animations — open, close, and switch feel instant and premium

Canvas safe — works correctly in Framer's editor and live preview

**Included:** 1 FloatPill code component — drop it on any page, set to fixed position, bottom center. Done.

**Ideal for:** Personal portfolios, creative studios, agency sites, SaaS landing pages, any site that wants to feel premium without cluttering the layout with a traditional navbar.

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

-   All · #5678

## Details

- **Author**: Kunal Sharma
- **Published**: 2026-04-15
- **Updated**: 2026-04-16
- **Added**: 2026-04-07
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards