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.
Bogdan Onofrei
