Slim Glass Nav

About this block

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.

When to use

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

• Nothing above the navbar. It is built to sit flush at the very top of the page.

After

• A hero section with a bold headline that benefits from the quiet frame above it.
• A logo cloud to add social proof before the first feature section.

What you can display

The right side of the bar is a compact slot for whatever matters most. A few ways to use it:

• Product navigation. Keep the four core destinations, such as overview, customers, pricing, and blog, and let the CTA carry signups.
• A docs oriented layout. Swap the links for documentation sections and relabel the CTA to open the app for returning users.
• A launch page. Trim to two links and point the pill CTA at a waitlist form while the product is still in early access.

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.