Slim Glass Nav
A slim glass navbar with a wordmark, four muted links, and one pill shaped CTA. Links collapse into a mobile sheet menu.
A slim glass navbar with a wordmark, four muted links, and one pill shaped CTA. Links collapse into a mobile sheet menu.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Slim Glass Nav is a slim, quiet navbar for products that want the page, not the chrome, to do the talking. A plain wordmark anchors the left edge while four muted links and a single pill shaped CTA sit together on the right. Generous horizontal padding, a hairline bottom border, and a frosted glass background let the bar read as a floating layer once the page starts scrolling beneath it.
On narrow screens the link row and CTA collapse into a hamburger icon that opens a sheet from the right edge. The sheet repeats the wordmark, lists the same links as tall touch targets, and closes with the pill CTA at the bottom. The wordmark, the links array, and the button label are plain strings, so rebranding the bar takes seconds.
This bar suits a product with strong visual confidence, such as a design tool or an analytics platform with a striking hero, where a heavy header would compete with the content below it. Because the links are muted and there is only one action, the bar sets a clear hierarchy: read the page first, convert when ready. Choose it over a standard header when you have a single conversion goal and no need for a separate sign in button in the bar itself.
A natural flow around it on a Marketing Pro page:
Before
After
The right side of the bar is a compact slot for whatever matters most. A few ways to use it:
Tip: resist adding a second button. The single CTA is what makes this bar feel intentional; if you need a sign in link, add it as a fifth muted link instead.