webdevpuneet.com

Floating Pill Navbar

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

3 sectionsView all →
Navbar

Floating Pill Navbar

Responsive · Animated
Navbar

Simple Sticky Navbar

Responsive · Animated
Navbar

Navbar With Announcement Bar

Responsive · Animated

Floating Pill Navbar — Free Website Section Template

Navbar · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue

CategoryNavbar
Tagsnavbarheaderfloatingpillglassfullscreen menudark
Updated October 20, 2026

Extend with AI

Take This Section Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Floating dark glass pill with logo, centred links and CTA
Full-screen mobile menu with large staggered links (GSAP)
Esc to close, focus trap and aria-expanded
Backdrop-filter blur over a theme-coloured surface
Sticky by default; optional hide on scroll down
Upload a logo or use the icon + name mark
Links show without JavaScript
Export HTML, a ZIP, React or Vue

About this section

Floating Pill Navbar — Free Glass Header With Full-Screen Menu

Floating Pill Navbar: A modern floating header: a dark, frosted-glass pill that hovers a little below the top of the page, with the logo, centred links and a bright CTA. On small screens the hamburger opens a full-screen menu with large links that stagger in, the style made popular by AI and design-tool websites.

Floating Pill Navbar is the modern header you see on AI, design and developer product sites: a dark, frosted-glass pill that floats a little below the top of the page, with your logo, centred links and a bright button. It looks especially good over dark or image-heavy hero sections.

A full-screen mobile menu

On small screens the hamburger opens a full-screen overlay with large, bold links that stagger in with GSAP, plus a big call-to-action button. Esc closes it and returns focus, Tab stays inside, and tapping a link closes it, so it behaves like a native app menu.

Glass, in pure CSS

The pill uses backdrop-filter blur over a translucent surface colour from your theme, with a soft shadow. Change the surface and brand colours, or apply your brand kit, and the pill, links and button all follow. Upload your logo or use the icon-and-name mark.

Sticky by default

The bar stays in view as visitors scroll, and you can switch on hide-on-scroll-down for long pages. Without JavaScript, the links simply show inside the pill.

Export it

Download HTML, a ZIP, React or Vue with the menu script included, or fork into My Code. Pair it with the dark Centred Gradient Hero for a complete AI-product header.

Why use it

Why Use the Floating Pill Navbar

◍
Feels premium
A floating glass pill instantly reads as modern and polished, especially over dark heroes.
⛶
App-like mobile menu
A full-screen menu with big links is easy to tap and makes small screens feel spacious.
⌨
Accessible
The overlay menu handles focus, Esc and screen readers, not just the animation.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the logo, links and button in the panel. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🤖
AI product website
Float it over a dark gradient hero with links to Product, Features, Pricing and Docs and a "Get started" button.
🎨
Design studio or portfolio
Use Work, Services, About and Contact links, with the full-screen menu showcasing your bold typography on phones.
🧑‍💻
Developer tool
Link to Docs, Changelog, Pricing and GitHub, and send the button to sign-up.
🎟️
Event or launch page
Keep a floating "Get tickets" button visible as visitors scroll through the agenda and speakers.

In real websites

Website Templates That Use the Floating Pill Navbar Section

The Floating Pill Navbar section is part of 7 complete website templates in the free Website Builder, so you can see it in a full page before you use it on its own: Creative Agency Website, Personal Portfolio Website, Coach & Consultant Website, Wedding Website, Church Website, Music Artist & Band Website, Corporate & Consulting Website. Open any of them in the builder to edit the whole page, or keep customising this section by itself.

Got questions?

Frequently Asked Questions

With backdrop-filter: blur() on a translucent background mixed from the theme’s surface colour, plus a thin border and a soft shadow. Browsers without backdrop-filter show the solid colour.

On small widths the navigation becomes a fixed overlay covering the screen. The menu script toggles it, GSAP fades it in and staggers the links, and Esc, link clicks or the X close it.

Yes. It is designed to float over any page; on light pages the dark pill stands out, or switch to a light surface colour for a lighter pill.

Up to six fit comfortably in the pill on desktop. The full-screen mobile menu can hold all of them easily.

It saves an editable copy of your Floating Pill Navbar in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.