Your Navigation, Reimagined.
PillNav replaces the stock header with a floating pill navigation — built directly from your real Squarespace nav, not a copy you maintain twice. Change a link there; it's live everywhere, automatically.
Shape & position. Left, center, or right alignment, adjustable offset, corner radius anywhere from a subtle rounded rectangle to a full capsule, background color, shadow.
Every element styled on its own. The toggle button has its own color, size, and radius — independent of the pill around it. Accent, text, and muted tones apply consistently across the whole menu.
Structure that follows your nav, not the other way around. Dropdown folders are handled automatically. Add a secondary column — "More," "Legal," anything — with a plain link in Squarespace, no separate config to maintain.
Motion on your terms. Set duration and easing by hand, or start from a preset. Add a frosted, translucent pill or background blur if the site calls for it — subtle effects, not the headline feature.
No two sites need to end up looking the same. Configure it visually, copy the generated code, paste it into Squarespace. Done.
Reads Your Squarespace Header
It mirrors your existing navigation automatically.
PillNav clones your real Squarespace header — nav links, folders, your logo, buttons, cart, and social icons — then hides the native header and renders a floating pill in its place. Rename, reorder, or add items in Squarespace and the pill updates on the next load. There's no second menu to maintain.
Auto from your header
01 — Position & Size
Place the pill exactly where you want it.
01.1
Horizontal alignment
Pin the floating pill to the left, center (default), or right of the viewport. It stays fixed at the top of every page as visitors scroll, always in the same spot.
Left · Center · Right
Left
Center
Right
01.2
Offset from top
The gap in pixels between the top of the viewport and the pill. Nudge it down for breathing room or up to sit tight against the edge.
01.3
Open width
How wide the menu expands when opened. Use a fixed length like
30vw or 480px, or auto to grow and fit its content — best when you have multiple columns. vw · px · auto
01.4
Separate mobile width
A dedicated open width for phones (90vw by default), with a configurable breakpoint. The pill feels right on desktop and never looks cramped on mobile.
02 — The Pill
Shape it to match your brand.
02.1
Corner radius
One value drives the whole shape. A large radius reads as a capsule when closed and a soft rounded rectangle when open; a smaller radius (≤28) keeps a consistent rounded shape in both states. Square, rounded, or full pill. it's your call.
Capsule · Rounded · Square
Capsule
Rounded
02.2
Background & shadow
Set any pill background color and any CSS box-shadow. A soft drop shadow floats the pill above your content; flatten it for a minimal look.
02.3
Logo — inherited
Your Squarespace logo (image or text) is cloned into the pill and inherits your Site Styles Logo Height automatically. Leave it on
auto to match your header exactly, or set a fixed pixel value. Auto from Site Styles
02.4
Stacking & spacing
Fine-tune the internal bar padding and the gap between logo and toggle, plus the z-index so the pill always sits above your content and popups.
03 — Toggle Button
The open / close button, your way.
03.1
Color, size & shape
Set the button color, icon color, size, and radius. Make the radius half the size for a perfect circle, or square it off. The open (✕) and closed (☰) states share the same styling for a clean, predictable control.
Circle · Rounded · Square
03.2
Icon scale
Control how large the menu icon sits inside the button. A single value keeps the hamburger perfectly centered at any button size.
03.3
Uses your burger icon
If your Squarespace header has a custom menu-icon style, PillNav clones it. Otherwise it renders a crisp built-in hamburger that morphs to an ✕ on open.
Cloned when available
04 — Menu & Columns
A full navigation menu, built from your header.
04.1
Everything is cloned
Links, folders, your logo, the cart with its live count, your primary button, and social icons are all pulled from your real header. The current page even gets a subtle accent dot, so visitors always know where they are.
04.2
Multi-column menus
Organize a larger menu into multiple headed columns — group related links, resources, and legal pages so nothing feels crowded. Each column carries its own heading, and you can add as many as you need.
Unlimited columns
04.3
Expandable folder sub-menus
Drop a Squarespace folder into a column and it becomes a clean click-to-expand sub-menu with a smooth height animation — no cramped nested lists.
04.4
Folder icon alignment
Place the folder's dropdown icon right beside its label, or push it to the far edge of the row. Two looks, one setting.
Sticky · Right
04.5
Social icons
Your header socials are collected into their own group. Lay them out in a wrapping row or a neat stacked column, and set their size in pixels.
Row · Column
04.6
Column headings
Every column carries its own heading, and the socials group heading is yours to name or translate — so each part of the menu is clearly labelled in your own words.
05 — Colors
Accent and menu tones.
05.1
Accent color
One accent drives your call-to-action link, the current-page dot, and the keyboard focus rings — so the whole pill feels like one coherent, on-brand control.
Accent
Text
Muted
Divider
05.2
Menu chrome
Independently set the menu text color, the muted tone used for column headings, and the divider line — so the panel matches whether your site runs light or dark.
05.3
Inherited link styling
Because the nav is cloned from your header, links keep your Squarespace fonts and sizing. PillNav only strips the native hover underline so the panel stays clean.
06 — Motion & Accessibility
Smooth to use, and open to everyone.
06.1
Open & expand animation
The pill glides open to its full width, and folder sub-menus unfold with a matched, buttery height animation. Set the duration and easing to taste.
Duration · Easing
06.2
Entrance animation
A gentle fade and drop-in when the page loads gives the pill a polished first impression. Adjust the drop distance, or switch it off entirely.
06.3
Built for accessibility
Respects the visitor's "Reduce Motion" setting, closes on Escape or a click outside, auto-closes when a link is tapped, marks the current page, and draws keyboard focus rings — all wrapped in a proper navigation landmark.
Reduce Motion
Esc to close
Click-away close
Current-page dot
Focus rings
Auto-close on link
07 — Effects
Premium touches, all optional.
07.1
Liquid Glass
Turn the pill frosted and translucent, with a soft top sheen and a light rim — Apple-style "liquid glass" that looks stunning floating over photography. Tune the tint, blur, and saturation, or leave it off for a solid pill.
Tint · Blur · Saturation
07.2
Backdrop
Dim and blur the page behind the open menu so the pill takes focus — especially over busy, full-bleed imagery. Tapping the dimmed area closes the menu. Set the scrim color and blur, or disable it.
Scrim · Blur
07.3
Scroll-spy
On one-page sites, the current-page dot follows whichever
#section is in view as visitors scroll — a live, self-updating table of contents built into your nav. One-page sites
08 — Scroll & Advanced
How it behaves as visitors scroll.
08.1
Scroll behavior
Auto mirrors your native header. Reveal hides the pill on scroll-down and brings it back on scroll-up. Mirror-native follows the header exactly, and Static keeps it perfectly still.
Auto · Reveal · Mirror · Static
08.2
Lightweight & safe
Pure vanilla JavaScript — no jQuery, no dependencies — minified and served from a global CDN. It measures your real header rather than guessing, and steps aside cleanly inside the Squarespace editor so you can keep editing.
Zero dependencies
08.3
Site-wide, one paste
Lives in your global Header code injection, so the pill appears on every page. One config block, one engine line — done.
08.4
Visual configurator
Every option above is set with a live visual configurator. No code to touch. Adjust, watch the config update in real time, click Copy, and paste.
No code required
08.5
Stays in sync
Change your navigation, logo, or socials in Squarespace and the pill updates on the next load. Only the styling lives in your config — the content is always live from your header.
FAQ
Questions we get asked a lot.
Yes. PillNav is built for Squarespace 7.1 and reads your existing header — nav, folders, logo, socials, cart, and button — so it fits any template. It measures your real header's styles rather than guessing, so there's no custom CSS to write.
No. The engine is tiny, dependency-free vanilla JavaScript, minified and served from a global CDN. It runs once on load to build the pill and adds no ongoing overhead.
Yes. Squarespace folders are cloned and rendered as clean click-to-expand sub-menus with a smooth height animation. Their dropdown icons come from your header, and you choose whether they sit beside the label or at the far edge.
Both are automatic. Your logo (image or text) is cloned into the pill and inherits your Site Styles Logo Height. Any social icons in your header settings are collected into their own group inside the open menu. Nothing to re-upload.
Yes — the open menu can be organized into multiple headed columns, each with its own label, so larger navigations stay tidy and easy to scan. It's quick to set up with no code, and you can add as many columns as you need. Step-by-step instructions are included in the setup guide.
No. A visual configurator handles all the setup. Choose your options, watch the config update live, click Copy, and paste two blocks into your Squarespace Header code injection. To change anything later, open the configurator and repeat.
Yes. PillNav reads your header on every page load, so renaming, reordering, or adding nav items, folders, or socials in Squarespace shows up automatically on the next load. Only the styling lives in your config — the content is always live.
That's intentional. Inside the Squarespace editor, PillNav steps aside so you can edit your real header and pages normally. Switch to your live site or Preview to see the floating pill.
Yes. The pill is a proper navigation landmark with ARIA state on the toggle. It closes on Escape and click-away, respects the OS "Reduce Motion" setting, marks the current page, and shows keyboard focus rings for tab users.
No. The pill's links are real anchor tags pointing at your real pages, and your Squarespace pages, URLs, and metadata are unchanged. The native header is only visually hidden, not removed, so search engines still crawl your navigation normally.