A page long enough to need a map

Scroll, and the bar underneath keeps track of where you are.

Overview

What the product does, in the two paragraphs someone will actually read before deciding whether to keep scrolling.

Pricing

Three plans, one of which is free forever, and a sentence explaining what triggers a move between them.

Security

Certifications, encryption and the link to the trust centre for the people who will ask for evidence.

Support

Who answers, when they answer, and what the median response time actually was last quarter.

FAQ

The six questions sales gets asked most, answered without hedging.

">

The prompt

Create a marketing page anchor navigation with Tailwind CSS. The nav is a sticky bar under the header holding five section links in a horizontal row on a white background with a hairline bottom border and, on the right, a small dark "Get started" button that only appears once the page has scrolled past the hero. Links are small and muted, with the active one in neutral-900 carrying a subtle neutral-100 pill background. Below the nav, five demonstration sections with ids, each a tall block with a heading and a paragraph so the behaviour can be seen. Then add JavaScript that observes the sections with IntersectionObserver using a root margin biased toward the top of the viewport, marks the matching link active, reveals the button after 400 pixels of scroll, and scrolls smoothly with an offset that accounts for the sticky bar when a link is clicked.

Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .

More nav bars prompts

All Nav Bars prompts →