Floating Pill Navbar

Floating Pill Nav is a fixed-position navigation component that sits at the bottom center of the viewport — always reachable, never in the way. It displays your logo, the current page name pulled dynamically from the page title, and a menu icon, all inside a frosted-glass pill.

Clicking the pill opens a layered overlay menu with your primary links, secondary links, contact information, and a CTA button. The whole interaction is handled by spring physics and staggered animations — the kind you see on high-end agency and editorial websites.

Most navs sit at the top and get ignored. This one stays in the thumb zone, feels intentional, and looks expensive doing it.

Is this for you?

Perfect for architecture, interior design, luxury real estate, portfolio, agency, fashion, and editorial websites, any project where the navigation is meant to feel considered, not just functional. Works equally well on marketing sites, SaaS landing pages, and personal projects.

How it works

The closed state shows a logo, the current page title, and a hamburger icon inside a frosted-glass pill with configurable blur, border, and color. On logo hover, a home icon slides in to signal it links back to the homepage.

Clicking the pill shrinks it into a square close button while the menu panel slides up from below with spring easing. Primary links enter with a staggered slide-up animation and respond to hover with a smooth roll-up text effect, the same dual-text technique used on luxury and editorial sites. Hovering any link dims the others, keeping focus sharp.

The menu is structured in three zones: primary links at the top, a secondary link row and contact information side by side in the middle, and a full-width CTA button at the bottom.

What you can customize

30+ property controls, all editable directly from the Framer canvas without touching code:

• Primary navigation links - label and URL for each, unlimited items

• Secondary navigation links - label and URL for each

• Phone number and email address with working tel: and mailto: links

• CTA button - label, URL, background color, hover color, text color, and border radius

• Logo image and logo hover image - two-state swap on hover

• Pill label override - set a custom label or let it pull the page title automatically

• Menu background color and backdrop blur intensity

• Pill color, border color, and border width

• Bottom offset - distance from the edge of the screen

• Menu width and height

• Menu border radius and pill border radius

• Shadow strength - from subtle depth to strong elevation

• Typography - separate font controls for primary links, secondary links, and the menu label

• Spacing - independent control between every section: label to links, links to secondary row, secondary row to CTA, and gap between individual primary links

Animations included

• Pill → close button transition (width, border-radius, icon swap)

• Menu panel: spring-physics slide-up entrance with scale

• Primary links: staggered slide-up on open

• Primary links: roll-up hover effect (dual-text technique)

• Secondary links: underline scale-in on hover

• Contact links: underline scale-in on hover

• Logo: vertical slide swap between default and hover image

• Body scroll lock when menu is open

Good to know

Works on desktop and mobile. Copy, paste, customize. Preview State control lets you switch between Closed and Open directly on the canvas, so every edit is visible without opening preview.