Building the whole landing page, not just this section?
You just browsed 25 Tailwind sticky navigation. Cruip makes complete Tailwind CSS templates for landing pages, SaaS websites and admin dashboards, coded in HTML, React, Next.js and Vue and used by 60K+ developers. Single templates start at $49.
The baseline every other pattern here extends: sticky top-0 z-40 pins a product header to the viewport, bg-tsn01-bg/75 backdrop-blur-xl lets the page dissolve beneath it, and scroll-mt-24 on every section stops in-page anchors from landing behind the bar.
The three-zone header every SaaS ships — logo left, links centred, actions right — built with one flex row. flex-1 justify-center centres the links in the leftover space, and below md the nav drops into its own swipeable row with max-md:order-last max-md:basis-full, so nothing is hidden behind a menu.
The responsive header with a hamburger that morphs into an X and a menu that opens by animating grid-rows-[0fr] to grid-rows-[1fr] — true height animation without measuring. A nine-line script sets one data-open attribute; every visual state is a group-data-open/hdr: variant. Escape closes, focus returns, and the closed panel is inert.
Full-bleed bar, contained content, no wrapper div. The header's background runs edge to edge while its logo and links align to the same 72rem measure as the page, using one arbitrary padding: px-[max(1.25rem,calc((100%-72rem)/2))]. Tick “Show measure” to overlay the column guides — a zero-JS has-[:checked] toggle.
A floating, rounded glass pill that hovers over full-bleed photography: sticky top-4 mx-auto w-fit rounded-full plus backdrop-blur-2xl backdrop-saturate-200. The glass only turns translucent inside supports-[backdrop-filter:blur(1px)]:, so browsers without blur get a readable solid pill, never invisible text.
A roomy 80px header that settles into a 52px compact bar once you scroll — logo, padding, CTA and shadow all transition together. The script only flips data-scrolled; every size lives in group-data-scrolled/hdr: variants. Hysteresis (shrink past 64px, grow back under 8px) kills the threshold flicker the CSS original had.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
The “headroom” header news sites use: it slides away as you read down and returns the instant you scroll up. data-hidden:-translate-y-full moves it on the compositor, a 6px delta filter ignores trackpad jitter, and keyboard focus always brings it back — a gap most hide-on-scroll scripts leave open.
White type floating over a full-bleed hero that turns into a frosted solid bar the moment the hero scrolls away. A negative margin (-mb-[4.5rem]) lets the hero sit under the sticky header, and an IntersectionObserver — not a scroll listener — flips data-solid exactly when the hero's bottom crosses the bar.
An article header with a hairline progress bar along its bottom edge, a live “4 min left” readout and the story title that slides into the bar once the headline scrolls away. The bar is origin-left scale-x-(--tsn09-p) — Tailwind v4's custom-property shorthand — so the script writes one number per frame and the compositor does the rest.
The full wordmark greets you; once you scroll, the letters fold away and only the mark remains, freeing room for the nav. The collapse animates grid-cols-[1fr] to grid-cols-[0fr] — a true width-to-zero transition with no measuring — and the link keeps a stable aria-label, so assistive tech always hears “Orbit Labs”.
One accent bar glides beneath the nav — following your pointer and keyboard focus, then settling back on the current page when you leave. The bar is positioned by two custom properties consumed with v4's shorthand, w-(--tsn11-w) translate-x-(--tsn11-x), so the script only measures; Tailwind owns the motion.
A Light · System · Dark switcher in a sticky header, built the v4 way: @theme inline maps every colour utility to a runtime custom property, so one attribute (data-theme) re-themes the whole page with no dark: prefixes in the markup. “System” follows prefers-color-scheme live; the choice persists when storage is available.
For launch pages where the only job is one action: a wordmark on the left, a single high-emphasis button on the right, and nothing else. The CTA carries the personality — a light sweep drawn with before: utilities, an arrow chip that nudges forward, and a press state — all in one class list, zero JavaScript.
Links on both sides, brand dead-centre — the fashion and hospitality header. grid-cols-[1fr_auto_1fr] gives true optical centring however wide each side is, and on phones a native <details> disclosure replaces both navs with a zero-JS dropdown that animates in via open: variants.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
Soft-UI done responsibly: a floating sticky bar extruded from the page with paired light/dark shadows, links that rise on hover and press into the surface when active. The shadows are @theme tokens (shadow-tsn15-out, shadow-tsn15-in), and the usual neumorphism failure — invisible text and focus — is fixed with full-strength ink and an accent focus ring.
A full-width, multi-column mega menu anchored under a sticky header: three product columns with icon tiles plus a featured card, a page scrim behind it, and an entrance that fades and drops 8px. It opens on click and — on real pointers — on hover with intent delays; Escape, scrim clicks and focus leaving all close it, and the closed panel is inert.
A working storefront header: a live search that filters the product grid as you type (press <kbd>/</kbd> to focus, <kbd>Esc</kbd> to clear), category chips under it, and a cart badge that bumps every time you add a plant — announced to screen readers through a polite live region. The clear button shows itself with peer-placeholder-shown:hidden, no script needed.
Two sticky layers that stack and stay: a dismissible announcement at top-0 and the main nav pinned right under it at top-11. Dismissing sets one attribute on the root — the banner disappears via group-data-dismissed/root:hidden, the nav slides up to top-0, and section anchor offsets shrink to match. Focus moves to the nav so keyboard users aren't stranded.
The product-page pattern: a slim global header at top-0 and a local sub-nav that scrolls with the page until it locks under it at top-14. Once stuck, the sub-nav gains a shadow and reveals the price and a Buy button; while you read, a scrollspy marks the section you're in with aria-current.
A search icon that unfolds into a full search field across the header — the nav fades aside, the input grows from 44px to 36rem, focus lands in it, and live suggestions filter as you type with the match highlighted. <kbd>Esc</kbd>, the close button or clicking away collapses it and returns focus to the icon. When collapsed, the field is inert.
The documentation layout: a two-column grid whose sidebar table of contents uses sticky top-20 self-start to follow a long article, highlights the section you're reading, and fills a progress rail alongside the links. On narrow screens the sidebar becomes a sticky “On this page” disclosure under the header that always names your current section.
An app-style bottom tab bar pinned with sticky bottom-0 inside a phone shell, padded with pb-[max(env(safe-area-inset-bottom),1.25rem)] so it clears the iPhone home indicator on real devices and still breathes everywhere else. Four working tabs swap their panels, the active tab gets a Material-style pill, and the Inbox badge clears when you visit it.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A one-page landing nav where a solid pill slides to whichever section you're reading. An IntersectionObserver with a thin band at 40% of the viewport decides the active section — no scroll maths — and sets aria-current="location"; the pill reads its position from translate-x-(--tsn23-x) w-(--tsn23-w).
A news-style category rail that scrolls sideways with snap-x snap-mandatory, fades its edges only when there's more to see, shows arrow buttons on mouse devices (pointer-coarse:hidden), and follows your reading: as each section passes, its tab becomes current and the rail glides to keep it centred.
An article header that pins with real share actions: X, LinkedIn and Facebook links built from the page's canonical URL and title, a Copy link button with a confirmation toast (and an execCommand fallback for sandboxed frames), and a native Share button that only appears where navigator.share exists. The story title slides into the bar once the headline scrolls away.
