Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Floating Pill Navbar — Free Website Section Template
Navbar · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue
What's included
Features
About this section
Floating Pill Navbar — Free Glass Header With Full-Screen Menu
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
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the logo, links and button in the panel. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match 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.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save 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
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. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.