Building the whole landing page, not just this section?
You just browsed 20 Tailwind responsive navbars. 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 frosted sticky bar, and the first thing worth porting: backdrop-blur-xl backdrop-saturate-150 over a bg-white/8 fill, sticky at the top, with a checkbox-driven mobile menu. The CSS original needs a second hand-built mobile bar; here the same bar carries both layouts, because the breakpoint is a prefix on the element that changes.
The three-column mega panel with icon cards, ported without a single descendant selector: group on the nav item, group-hover:/group-focus-within: on the panel, grid-cols-3 inside it. On mobile the same sections become native <details> disclosures — which is what the CSS version's flattened link list wanted to be.
The dashboard drawer: off-canvas below md, permanently docked above it, and the same element in both cases. -translate-x-full group-has-checked:translate-x-0 md:translate-x-0 is the entire state machine, and the backdrop is a <label>, so tapping it unchecks the box — no script, and no click handler that only a mouse can reach.
Docs-style tabs where the underline is an after: strip that scales from 0 to 0.6 on hover and to 1 on the current tab. All three states are utilities on the link, and the active one reads aria-current="page" — so the indicator and the screen-reader announcement come from the same attribute.
A floating glass pill with white-pill active state — and the demo where the port pays for itself twice over. The CSS original ships a completely separate mobile bar and mobile menu; here the pill itself reflows: the links collapse, the hamburger appears inside the same capsule, and the panel drops out of it.
A transparent hero header that becomes a compact frosted strip once the page moves. The script's entire job is one attribute — data-scrolled on the root — and every visual consequence is a group-data-scrolled: utility on the element it affects: the height, the logo colour, the link colour, the ghost-to-solid CTA.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
Cyber-terminal chrome: gradient-clipped logotype, a status chip whose dot pulses on a theme-registered keyframe, and links whose neon underline grows inward from both edges. The glows are arbitrary shadow-[…] and drop-shadow-[…] values in oklch, which is where colour precision actually matters.
A docs header with a breadcrumb trail, a section pill row and a reading-progress bar. The port changes one important thing: the script writes a single custom property, --tnb08-read, and the bar renders it as scale-x-[var(--tnb08-read)] — a compositor transform instead of a per-frame width, which is the difference between a smooth bar and a janky one.
Editorial contrast: a dark brand-and-nav bar and a yellow action block meeting on a 24px diagonal. The cut is a single arbitrary [clip-path:polygon(…)] utility on the yellow panel, which overlaps the dark bar by 24px so the angle always has dark behind it.
Desktop gets a conventional top bar; phones get an iOS-style bottom tab bar with a lifted centre action. The pair is one component: hidden md:flex on the top nav, md:hidden on the tab bar, and pb-[env(safe-area-inset-bottom)] so the home indicator never covers a tab.
A floating glass bar inside a rotating gradient ring. The port fixes the original's real flaw: the CSS version swapped whole background declarations at four keyframe stops, so the gradient jumped. Here an @property-registered angle interpolates, and the ring turns continuously — the one place this collection adds a rule to the stylesheet to get a better result.
The fashion-house header: a serif logotype dead centre, uppercase link groups balanced either side. grid-cols-[1fr_auto_1fr] is the entire layout, and the mobile state is the same grid collapsed to two cells — not the second bar the CSS original had to maintain.
An icon-plus-label capsule where the current item is marked by a small glowing dot that springs in. The CSS original needed li:has(a.is-active) in the stylesheet; the port reads the same thing as a variant — has-aria-[current=page]: on the item — so the marker is derived from the accessible state, in the markup.
The agency overlay: a full-viewport curtain of oversized type that drops from the top, its links cascading in on a stagger. The open state isaria-expanded on the button, so style and semantics cannot drift — and the stagger is one utility reading a per-link --i.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A search icon that grows into a field while the nav links step aside. One attribute on the root — data-searching — drives three elements at once: the capsule's width, the input's opacity, and the links' fade-out. The script focuses, collapses on Escape or outside click, and touches no styles.
Three detached capsules — brand, links, call to action — floating over the page instead of one bar. Each island carries the same glass recipe as a shared set of utilities, and below md the middle island simply stops existing while its links drop out of the brand capsule.
A checkout header: five steps, connector lines that fill behind completed ones, and a summary strip with a progress bar. Each step declares its own state as data-state="done|current|todo", and every visual — circle fill, label colour, connector — is a data-state-* variant, so advancing the flow means changing one attribute per step.
A 64px icon rail that expands to 220px on toggle, with labels, section headings and a profile block fading in as it widens. Five separate :checked ~ rules in the original become group-has-checked: on the five things that actually change — and the collapsed rail gains real tooltips, which the CSS version only suggested in its customization notes.
The e-commerce header stack: promo strip, utility row, main nav. The port upgrades the dismiss from an instant display:none to an animated collapse — grid-rows-[1fr] to grid-rows-[0fr], the modern height-transition idiom — and remembers the dismissal in localStorage.
An IntersectionObserver scroll spy with a springy pill that hops between links and a progress hairline underneath. The port changes what the script writes: two custom properties (--x, --w) and one aria-current per link. The pill's motion, spring curve and the progress fill are all declared in utilities.
FAQ
Frequently asked questions
How do I open a Tailwind mega menu on hover without any JavaScript?
The Mega Menu Dropdown Navbar opens its three-column panel purely with Tailwind's group and group-hover: variants — no descendant selectors, no script. Wrap each nav item in a group container, give the panel opacity-0 invisible plus group-hover:opacity-100 group-hover:visible, and transition both properties. Toggling invisible rather than hidden keeps the fade animatable, since display can't transition. One real caveat: a hover-only menu is unreachable by keyboard and touch, so pair the hover variants with group-focus-within: so a tabbed-in link reveals the panel too, and treat hover as an enhancement on top of a focus or click path rather than the only way in. Add aria-expanded to the trigger so assistive tech knows the panel's state.
How do I make the sidebar drawer slide in on mobile but stay docked on desktop?
The Sidebar Drawer Navigation demo carries both states on the same element through responsive variants. Give it fixed -translate-x-full as the mobile off-canvas base, then md:static md:translate-x-0 so from the md breakpoint up it docks back into normal flow and stays put. Toggle the mobile state by flipping -translate-x-full to translate-x-0 and transitioning transform, which is compositor-cheap. The common bug is leaving the dimmed backdrop and body-scroll lock active above md, where the drawer is already docked — gate the overlay with md:hidden. For accessibility the trigger needs aria-expanded and aria-controls pointing at the drawer's id, and Escape should close it and return focus to the button that opened it.
How do I make a Tailwind navbar shrink when the user scrolls?
The Scroll-Aware Shrink Navbar keeps its entire logic in one scroll listener that toggles a single class once window.scrollY crosses a threshold: the transparent hero bar swaps to a compact frosted strip, and every size, padding and background change rides on Tailwind utilities keyed off that class. The most common bug is reading scrollY and writing styles on every scroll event, which forces layout thrash and jank — wrap the read in requestAnimationFrame and bail early if the shrunk state hasn't actually changed. Add a small gap between the shrink-on and shrink-off thresholds (hysteresis) or the bar flickers when the user parks the page right at the boundary. Respect prefers-reduced-motion by dropping the height and padding transition so the swap is instant for those users.
Why is my Tailwind backdrop-blur navbar not blurring anything behind it?
The Glassmorphism Frosted Navbar leans on backdrop-blur-xl backdrop-saturate-150 over a translucent background. When it renders flat, the usual cause is a fully opaque background utility on the same element — backdrop-blur only affects what shows through the element, so the background must have alpha, e.g. bg-white/70 rather than bg-white. It also needs content actually scrolling behind it, so the bar has to be sticky top-0 or fixed with a positive z-index. Two more traps: an ancestor with overflow-hidden can clip the backdrop-filter entirely, and older or reduced-transparency browsers ignore the filter, so keep a solid semi-opaque fallback color underneath. Tailwind emits the -webkit- prefix Safari needs, so you don't have to add it by hand.
How do I make these Tailwind navbars keyboard and screen-reader accessible?
Wrap the bar in a real <nav> with an aria-label, and use genuine <a> and <button> elements instead of clickable <div>s so they're focusable and announced. Every toggle in the set — hamburger, drawer, mega menu, the morphing search — needs aria-expanded reflecting its open state and aria-controls pointing at the panel id. Hover-revealed dropdowns must also open on focus via group-focus-within and close on Escape, returning focus to the trigger. Mark the current destination with aria-current="page", which several demos already style. Icon-only controls need an aria-label, decorative SVGs get aria-hidden="true", and every interactive element needs a visible focus-visible ring — hover state alone strands keyboard users.
How does the scroll-spy active link highlight actually work?
The Scroll Spy Active Highlight Navbar uses an IntersectionObserver watching each page section; when a section enters the viewport band it marks the matching link active and a springy pill hops to it under a progress hairline. The bug that bites everyone: sections shorter than the viewport never reach a full 1.0 threshold, so nothing ever fires. Set rootMargin to a negative top and bottom band, e.g. -40% 0px -55% 0px, so a section counts as active only while it sits through the middle of the screen, and keep threshold low. When two sections satisfy the condition at once, take the last isIntersecting entry as the winner. Give each target scroll-margin-top equal to the sticky bar's height so anchor jumps don't land hidden underneath the navbar.
Why does my sliding underline or pill indicator drift out of alignment on resize?
The Animated Underline Tabs, Pill Highlight and Scroll Spy demos that measure a JS-positioned indicator all share one failure mode: measuring the active link's offset and width once, on load. When the viewport changes width, a web font swaps in and reflows the links, or a dropdown shifts them, the pill keeps its stale coordinates and slides to the wrong place. Fix it by extracting the measurement into a reposition() function, storing the current active element, and calling reposition() from both the activate handler and a windowresize listener, throttled with requestAnimationFrame. Note the Animated Underline demo sidesteps this entirely — its underline is an after: pseudo-element that scales from 0 with scale-x, so there's nothing to measure and nothing to knock out of alignment.
Which of these navbars should I not use for a small content site?
Match the pattern to the number of destinations. The Mega Menu and Full-Screen Overlay Menu suit large marketing or agency sites with many sections, but on a three-link blog they're overkill and actually hurt discoverability — a plain top bar or the Animated Underline Tabs reads faster and needs no toggle. The Bottom Tab Bar mimics a native app and only earns its place on app-like products with three to five primary sections; on a document site it steals thumb space and hides links behind an icon. The Step Progress Wizard is specific to checkout and onboarding flows, not general site navigation. The Scroll-Aware Shrink and Scroll Spy demos both assume one long scrolling page — drop them on multi-page sites where there's no single document to shrink against or spy on. When in doubt, ship the simplest bar that fits your link count.
