Building a whole Tailwind app, not just this component?
You just browsed 17 Tailwind side menu. Untitled UI Pro unlocks 5,000+ components and sections and 250+ page examples for React, styled with Tailwind CSS v4. One licence is a one-time $349 with lifetime updates; teams start at $999.
A navigation drawer that slides in from the left when the hamburger is pressed, with the three bars morphing into an ✕ and each link easing in on a stagger. The whole state machine is one visually hidden checkbox read by v4's group-has-checked: variant — so the drawer, the icon, the scrim and the link cascade all hang off the root. Zero JavaScript.
A slide-over drawer that frosts the page behind it: the backdrop animates from clear to backdrop-blur-sm and 60% ink while the panel glides in on an iOS-sheet curve. The backdrop is a second <label> for the same checkbox, so tapping anywhere outside closes the menu — no JavaScript, no event listeners.
The true off-canvas pattern: instead of overlapping, the whole app shell is pushed right by exactly the drawer's width — and in this port it also scales back to 96% with a rounded edge, so the menu reads as a layer underneath the page. The nav slides in on a parallax offset (one-third of its width) for the depth of a native mobile app. Pure Tailwind.
A 60px icon rail that widens to 232px on hover or keyboard focus, fading in labels and badges after the width has started moving. The port fixes the original's biggest flaw: the rail now expands over the page as a floating layer instead of shoving the content sideways on every mouse pass. Pure Tailwind.
One markup, two layouts: a permanent sidebar column on wide containers that becomes an off-canvas drawer with a hamburger toggle on narrow ones. The port switches on a container query (@max-[40rem]:) rather than the viewport, so the component responds to the space it is given — a sidebar inside a split pane collapses correctly even on a 27-inch monitor.
A full-height sidebar pinned with sticky top-0 h-svh while a long article list scrolls past it, topped by a scroll-driven progress bar that needs no JavaScript ([animation-timeline:scroll()]). Below 45rem of container width the sidebar folds into an icon rail whose labels stay available to screen readers via @max-[45rem]:sr-only.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A three-level documentation tree — section, group, page — built on native <details> disclosures instead of checkbox hacks, so every level is keyboard-operable and announces expanded/collapsed for free. Panels animate to their true height with ::details-content + interpolate-size, ending the max-height: 300px magic number. Zero JavaScript.
The canonical app layout, done right: a flex flex-col sidebar where the link region takes flex-1 min-h-0 overflow-y-auto, pinning the brand to the top and the storage card plus user footer to the bottom — no absolute positioning, and long menus scroll inside the middle region instead of pushing the footer off-screen.
Soft UI in the dark: links rest flat, extrude on hover and press into the surface when active, using two shadow tokens minted in @theme (shadow-tsm09-out, shadow-tsm09-in). The port fixes the illusion-breaking colour mismatch of the original — sidebar, page and cards now share one base tone — and adds the high-contrast focus ring neumorphism always needs.
A frosted-glass sidebar floating over three slowly drifting colour blobs, blurred and colour-boosted with backdrop-blur-xl backdrop-saturate-180. The port adds what most glass tutorials skip: a supports-[backdrop-filter:blur(1px)]: fallback to a near-opaque panel, a specular top edge, and legible 72%-white text instead of the original's 50%.
A terminal-grade threat console: Orbitron headings with pink and cyan neon bloom, CRT scanlines drawn by a before: repeating gradient, a faulty-tube flicker on the logo and chamfered stat panels cut with clip-path. The port keeps the neon for accents only and lifts every body label to readable contrast — the original's grey-on-black nav was 2.4:1.
Structure as decoration: a black slab with a 4px red rule, condensed 900-weight uppercase links prefixed by monospace //, and a hover that slams to full yellow with black ink. The active row fills solid red and grows an arrow via aria-[current=page]:after:content-['→']. Zero gradients, zero radii — and every state is now visible to keyboard users, not just the mouse.
The checkbox hack, explained by itself: a hamburger that springs into an ✕ on an overshoot curve, a drawer, a click-outside scrim, and a live state pill that flips between “closed” and “open” so you can watch the :checked state drive the UI. The code card shows the actual Tailwind classes doing the work. 0 lines of JavaScript.
A thin teal edge strip that slides a full navigation drawer out when you hover it — and, in this port, when you Tab to it or tap it on a touchscreen. A 200ms grace delay on close (and none on open) stops the drawer snapping shut when the pointer wobbles off its edge. Pure Tailwind, no checkbox.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A sidebar that animates between a 240px full layout and a 64px icon rail at the press of a pivot button, with labels, badges and the user card collapsing in sync via max-w-0 opacity-0. The toggle button flips its arrow and its accessible name (“Collapse sidebar” ↔ “Expand sidebar”), and collapsed labels stay in the accessibility tree. Zero JavaScript.
A documentation sidebar with a search field, four independently collapsible sections and an active page marker. Each section animates to its true height with the grid-rows-[0fr] → grid-rows-[1fr] technique — no max-height guess — and every section header is reachable by Tab with a visible focus ring. Zero JavaScript.
A floating vertical dock in dark frosted glass: icons at rest, labels springing open on hover or focus, and a glowing highlight pill that slides to whichever item you point at. The port makes the dock actually work — clicking an item moves aria-current, updates the page title and parks the highlight there; arrow keys move focus up and down the dock.
FAQ
Frequently asked questions
How do I make a Tailwind side menu slide in without JavaScript?
Most drawers here use the checkbox hack: a visually hidden <input type="checkbox"> paired with Tailwind's peer, and a <label> acting as the hamburger trigger. The panel sits at -translate-x-full by default and moves to translate-x-0 via peer-checked:translate-x-0, with transition-transform duration-300 driving the motion. Because the state lives entirely in the checkbox, no script runs — the Pure CSS Hamburger Menu and the No-JS collapsible sidebar both work this way. The one structural rule: the panel and trigger must appear after the input and be reachable as siblings, so the peer-checked: variant can style them. If you want a backdrop that also closes the menu, add a second <label> pointing at the same checkbox id behind the panel.
What's the difference between an off-canvas push sidebar and an overlay drawer?
An overlay drawer (demos 01 and 02) slides over the page: the panel is fixed, sits above a backdrop, and the content underneath never moves. An off-canvas push (demo 03) instead translates the entire app shell — the sidebar and the main column live in one flex row that shifts right by exactly the drawer's width when open, so nothing overlaps and no backdrop is needed. Push feels more app-like on wide screens but costs horizontal space and can shove content off-screen on narrow viewports, which is why the responsive demo 05 switches to an overlay drawer below its breakpoint. Pick overlay when the menu is temporary and the page behind should stay put; pick push when the sidebar is part of the layout and you want the content to visibly make room for it.
How do I build a collapsible icon sidebar that expands on hover in Tailwind?
The icon rail (demo 04) sets a fixed w-16 and grows to w-[232px] with hover:w-[232px] and focus-within:w-[232px], animated by transition-[width]. The labels are already in the DOM but start at opacity-0 and a small translate-x, then fade to opacity-100 via group-hover: and group-focus-within:, delayed slightly so text only appears after the rail has finished widening. Two things to get right: include focus-within alongside hover so keyboard users can expand it too, and keep the icons at a fixed shrink-0 size so they don't jump as the label space opens up. Demo 15 uses the same width transition but latches the open state to a toggle button instead of hover, which is steadier for a sidebar that stays on screen.
Why does my Tailwind drawer flash open on page load, and how do I stop it?
If the drawer visibly slides closed on first paint, your transition is animating the initial render. The fix is to make the closed position (-translate-x-full) the default class rather than a state you apply after mount — with the checkbox-hack demos this is automatic, because the unchecked state is the resting state and nothing changes on load. The other frequent bug is a backdrop that keeps blocking clicks after closing: the overlay in demo 02 animates opacity and backdrop-blur-sm, but if it stays at pointer-events-auto while invisible it still swallows clicks over the page. Pair the opacity transition with a default pointer-events-none and peer-checked:pointer-events-auto, so the backdrop only intercepts input while the menu is actually open.
Are these sidebar menus keyboard accessible?
The drawers that open on hover (demos 04 and 14) also respond to focus-within, so a keyboard user tabbing into a link expands the panel instead of being stranded in a hidden strip — that pairing is the accessibility fix for every hover-driven sidebar. For the checkbox-hack menus, the trigger is a real <label> tied to an <input>, so it toggles with Space and sits in tab order; just add an aria-label to the hamburger since it has no text of its own. The nested trees (demos 07 and 16) build on native <details> and <summary>, which bring correct roles, Enter/Space toggling and expanded state for free. What these pure-CSS patterns can't do is move focus into the drawer on open or trap it there — if that matters for a modal-style menu, drive the open state with a small script instead of the checkbox.
How do I keep a Tailwind sidebar full height and sticky while the content scrolls?
Demo 06 pins the sidebar with sticky top-0 and gives it h-svh so it fills the viewport height and stays put while the article column scrolls past it. The usual mistake is reaching for fixed, which pulls the sidebar out of flow and forces you to manually pad the main content to compensate; sticky keeps it in the flex row, so the layout still reserves its column. The other trap is height context: a sticky element only sticks within its containing block, so the parent has to be tall enough to scroll. If you cap the parent at h-svh with overflow-hidden, nothing scrolls and the stickiness never engages. Prefer h-svh over h-screen so mobile browser chrome doesn't clip the bottom of the nav.
How do I build a nested multi-level sidebar menu in Tailwind?
The documentation tree in demo 07 nests native <details> elements three levels deep — section, group, page — with each <summary> as the clickable header and a chevron rotated through the open-state variant on the parent. Because it's built on the disclosure element, every level opens independently and remembers its own state with zero script. Demo 16 is the same idea with four sections that each collapse on their own, plus a search field and an active-page marker. The thing to watch is indentation: give each nested level its own left padding so the hierarchy actually reads as a tree. And don't force one-open-at-a-time accordion behaviour unless you genuinely need it — native <details> lets several branches stay open at once, which is usually what someone scanning docs wants.
When should I not use the pure-CSS or hover-to-open sidebar patterns?
Hover-to-open (demos 10 and 14) and the pure-CSS checkbox hack (demo 13) are elegant but limited. Don't open primary navigation on hover for touch devices — there's no hover event, so the edge strip in demo 14 falls back to focus and you must make sure a direct tap works too. Avoid the checkbox hack when you need the menu to move focus inside on open, trap it, restore focus on close, or react to a resize or route change — those require state CSS can't hold, which is why the responsive demo 05 leans on real breakpoints rather than a single toggle. Heavy visual styles are their own tradeoff: the glassmorphism and neon demos (10 and 11) rely on backdrop-blur and layered shadows that repaint during scroll, so on long pages or low-end hardware prefer the flat flexbox layout in demo 08.
