About this block

Standard Sticky is a full width header that pins to the top of the viewport as the page scrolls. A small square logo mark sits on the left alongside the product name. To the right of center, four inline links (Product, Features, Pricing, Changelog) provide the main site navigation. On the far right, a ghost "Sign in" button and a solid "Get started" button give visitors two distinct calls to action. A subtle bottom border and a frosted glass background keep the bar readable over any content scrolling beneath it.

On smaller screens the inline links and CTA buttons are hidden. A hamburger icon replaces them and opens a slide-in sheet from the right edge. The sheet repeats the logo, lists the same links as full-height touch targets, and stacks the two CTA buttons at the bottom. All four nav links, both CTA labels, and the logo copy are straightforward text you can replace without changing any structure.

When to use

Reach for this block when your AI assistant product needs a conventional top bar that works at every breakpoint without demanding visual attention. It fits any page that already carries enough content to warrant sticky navigation, such as a long landing page, a docs root, or a marketing page with multiple distinct sections. Compared to the pill-shaped centered variant, this layout reads as more neutral and enterprise-friendly, which suits products where trust matters as much as style.

A natural flow around it on a Modern SaaS page:

Before

• A short hero from the Heroes group to set context immediately below the bar

After

• Features to follow the hero with a breakdown of what the AI product actually does
• Pricing further down the page so the "Get started" CTA already in the bar has a destination

What you can customize

The bar has three independently editable regions, so you can tune any one of them without touching the others:

• Logo area. Swap the letter mark and product name for your own icon component and brand name; the flex row handles any width naturally.
• Navigation links. The links array drives both the desktop nav and the mobile sheet, so adding or removing a destination updates both layouts at once.
• CTA buttons. Replace the ghost and solid button labels and hrefs to point at your sign-in route and onboarding flow.

Tip: if your product has a single conversion goal, remove the ghost "Sign in" button and let the solid CTA stand alone for a cleaner bar.