Pill Nav
A contained rounded pill header inset from the page edges with links and a rounded CTA.
A contained rounded pill header inset from the page edges with links and a rounded CTA.
The Marketing Collection unlocks the source for every Marketing block. All Access unlocks every Collection.
Already purchased? Log in
Pill Nav is a contained header rather than a full width bar. A rounded bordered pill, inset from the top and side edges and capped at a comfortable width, holds the logo, four links, and a rounded CTA, all over a backdrop blur with a soft shadow. The pill sticks with a small gap above it, so page content slides beneath while the header floats in its own space.
The links are one array shared with the mobile sheet, every radius in the pill is rounded full for consistency, and the logo chip is a circle to match. Keep the link set short, the pill works because it is compact, and the capped width is part of the design rather than a constraint to fight.
Reach for this block when the site has personality and the header should too: portfolio adjacent SaaS, design tools, indie products, and modern landing pages. It reads light and intentional where standard-sticky-nav reads infrastructural. Skip it for dense sites, the capped width cannot carry six links and two CTAs, and double-deck-nav serves that need.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is a design forward product with a four link architecture. Other fits:
Tip: pair the pill with heroes that center their copy, the symmetry keeps the floating bar from feeling detached.