Building the whole admin dashboard, not just this layout?
You just browsed 30 Tailwind sidebar layouts. Mosaic by Cruip is a complete Tailwind CSS admin dashboard template, coded in HTML, React, Next.js, Vue and Laravel, with a Figma version too. It costs $69.
The 2027 SaaS shell in one file: brand, nav, user badge and a real light/dark switch that re-skins the ENTIRE app from a single checkbox. The port's win is that the theme flip gets simpler in v4 — every utility already compiles to var(--color-tsl01-*), so one scoped rule re-points the tokens and the whole shell follows without a single conditional class.
An enterprise rail that folds from 240px of labelled navigation down to a 64px icon strip, where every icon grows a tooltip on hover and keyboard focus. The port's move is has-checked: — the collapsed state is declared on each element that changes, instead of in a distant block of descendant selectors.
The Stripe-style docs tree: three levels of nested navigation, a guide rail connecting each level, and the current section lit automatically as readers jump between anchors — no scroll-spy script. The port turns eight :has(#id:target) selectors into eight arbitrary variants that sit on the links they light.
One <nav>, two personalities: under 768px an iOS-style bottom tab bar with safe-area padding, at and above it the same markup stands up into a left sidebar. No duplicate nav trees, no resize listeners — the breakpoint prefix does all of it.
The alignment problem every metrics rail has — icons, labels of wildly different lengths, live values and status badges drifting out of column — solved with grid-template-columns: subgrid. Every row borrows the same four tracks from the list, so no width is ever hard-coded.
The polished shrink-to-rail: 248px of labelled navigation eases to a 68px icon rail in one motion, with labels fading before the track finishes on collapse and after it on expand. That asymmetric stagger is the whole demo, and in Tailwind it is two delay utilities.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
The long-article companion rail: a TOC that rides along as you scroll, with the three constraints people always miss, plus a scroll-driven reading progress bar. The port is a good illustration of the split — sticky is three utilities, the scroll timeline stays CSS because it has no utility form and should not.
The zero-JS drawer done the 2026 way: a hidden checkbox holds state, has-checked: reads it from any depth, and the panel slides on a GPU-composited transform. The hamburger morphs into an X from the same signal, using nth-child arbitrary variants.
The foundational app shell every dashboard starts from — locked rail, independently scrolling main pane — built as a height-constrained grid rather than position:fixed plus a magic margin. Each pane owns its overflow, so nothing overlaps and the whole thing nests inside any container.
The off-canvas drawer rebuilt on the platform's newest primitive. popover="auto" ships Esc-to-close, light dismissal, focus return and top-layer rendering; v4 contributes real variants for the hard part — starting: for the entry animation and an open: variant for the resting state.
The design-tool inspector: a right-hand properties panel tuned for its real job — dense labelled controls, hairline dividers, and logical-property borders so an RTL locale flips the whole layout for free. The canvas stays first in the DOM, which is what screen readers and the tab order want.
The list/detail split every mail client, messenger and support inbox uses: folder rail, 320px message list, reading pane — three independent scroll regions in one grid. The port's pleasure is line-clamp-2, which replaces the four-declaration -webkit-box incantation with one utility.
The Notion/Discord-class shell: primary nav left, contextual panel right, content between. The most valuable line in the demo is minmax(0,1fr) on the middle track — the answer to the most-asked grid question on the internet, and one that reads more clearly as a utility than as CSS.
The 68px icon rail perfected: 44px targets, hover tooltips, notification dots, a bottom-pinned avatar — and an active pill that glides between icons using CSS anchor positioning. The effect teams reach for a motion library to get, with no script and a clean fallback.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A storefront filter rail built entirely on native <details>/<summary> — keyboard-operable, screen-reader-announced and crawlable with zero script. v4's open: variant styles the expanded state, and accent-color brands every checkbox in one utility.
The elevated dashboard rail: detached on a 16px inset, frosted with backdrop-blur + backdrop-saturate, and finished with the gradient hairline that makes glass read as glass instead of grey plastic. The hairline is the one thing utilities cannot say — and the demo is honest about it.
Navigation up top, profile locked to the bottom — the answer is mt-auto in a flex column. The middle nav scrolls when it outgrows the rail, with mask-gradient fades hinting at the overflow, and the demo's real lesson is one easily-forgotten utility: min-h-0.
The drawer that pushes instead of covering: opening slides the entire canvas right by exactly the drawer's width, both elements moving as one welded unit. One shared variable feeds the drawer width and the canvas displacement, so they cannot drift.
The modal-grade overlay drawer: content dims and blurs behind a scrim, the panel lifts on a shadow that fades in with the slide, and pointer-events discipline keeps the dimmed page genuinely inert. A cart, because that is the pattern's home.
The collapse that survives a refresh. Geometry derives from one --w variable that a data-state attribute swaps; six lines of JavaScript move a string between localStorage and that attribute, restored before first paint so returning users never see the wrong-width flash.
The command-centre rail: a search field pinned above a long scrolling menu — sticky inside the sidebar's own scroll context, not the page's — with a ⌘K keycap chip and focus-within ring-lighting the entire field when the input takes focus.
How large admin tools stay navigable: links under quiet uppercase group labels, with no dividers anywhere. The whole technique is typographic — size, case, tracking, colour and a 10:1 spacing ratio — which makes it the demo where Tailwind's scale does the most work.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
The sliding active bar — the effect teams install a motion library for — with zero JavaScript. Links target anchors, :target identifies the section, and one indicator element transitions between stops computed from a single row-height variable.
A file-explorer-grade tree: three levels of nested <details>, rotating chevrons, indent guides drawn as logical borders, and progressive padding from one --indent variable. Keyboard-operable out of the box because disclosure is native.
One sidebar, three personalities: Files, Search and Activity, switched by a segmented control. Hidden radios drive which panel renders, a thumb glides between tabs, and panels enter with a few pixels of lift — with native arrow-key switching for free.
The setup-wizard rail: done / current / upcoming steps, checkmark badges, a connector that fills with accent behind you, and CSS counters numbering the pending steps automatically. Add or remove a step and numbering, line and states all recompute.
Drag-to-resize with no pointer listeners, no drag maths: resize-x plus overflow-auto and a min/max fence, and the browser runs the entire interaction. Tailwind ships the resize utility, so the whole mechanism is three classes.
The Slack/IDE archetype, assembled from this collection's parts: the 68px icon rail from demo 14, the sticky-search list from demo 21, and demo 09's independent scroller as the body. One grid declaration composes them, and panes drop by priority as space runs out.
A sidebar that responds to its own width, not the viewport. Drag the handle and the nav morphs through three densities — full, labels-only, icon rail — entirely from container queries, which v4 exposes as ordinary variants.
The showpiece: a floating frosted pane over a slowly drifting aurora, with heavy blur and saturation, a light-catching hairline, glass nav pills and a glowing gradient CTA — art-directed to the edge while staying readable, keyboard-navigable and reduced-motion safe.
FAQ
Frequently asked questions
How do I build a collapsible Tailwind sidebar with no JavaScript?
Demo 08 holds the open/closed state in a visually hidden <input type="checkbox"> placed before the rail in the DOM. A <label> with a matching for toggles it, and Tailwind's has-checked: variant reads that state from an ancestor — has-checked:w-16 shrinks the rail, has-checked:opacity-0 hides the labels. No click handler, no state library. The rule that trips people up: has-checked: compiles to :has(:checked), which only matches inside the element's own subtree, so the checkbox must sit in the layout root where the styled nodes can see it — not buried inside a card. Pair the width change with transition-[width] so the fold eases instead of snapping, and keep the checkbox off-screen with sr-only rather than hidden, since a fully hidden input can't take focus for keyboard users.
How do I keep the sidebar collapsed state after a page refresh?
Demo 20 stores one value in localStorage and drives every dimension from a single custom property. The rail's width is --w, applied with an arbitrary value like w-[var(--w)], and a data-state attribute on the root switches --w between the expanded and collapsed sizes. The toggle writes the new state back to storage. Because all geometry flows from one variable, padding, label opacity and icon centring key off the same attribute instead of a dozen hardcoded widths. The common bug is a flash of the wrong width: if you read localStorage after hydration, the first paint shows the default rail, then it jumps. Fix it by setting data-state in a small blocking inline script in the <head>, before the body renders, so the very first paint already matches the stored preference.
How do I make the content scroll independently while the sidebar stays fixed?
Demo 09 is the base shell: the layout root is a flex row at h-screen, the rail is a fixed-width column, and the main pane gets flex-1 overflow-y-auto. The rail never scrolls with the page because the whole shell is pinned to the viewport height and only the content column owns the overflow. Two things break this. First, forgetting min-h-0 on the scrolling child — flex items default to min-height: auto, which refuses to shrink below their content, so the pane grows the page instead of scrolling inside it. Second, putting overflow on the wrong element. Keep the height cap on the root, let the rail size naturally, and scope overflow-y-auto to the content column only. If the rail also carries a long menu, give it its own overflow-y-auto so the two panes scroll independently.
Why is my sticky sidebar not sticking as I scroll?
Demo 07 uses sticky top-0, and it fails for two predictable reasons. A position: sticky element only travels within its parent's box, so if the parent is no taller than the sidebar there's no room to move and nothing appears to stick — the sidebar's column needs to be the short one beside a tall article that supplies the height. The second killer is overflow: hidden or overflow: auto on any ancestor up to the scroll root: it silently creates a scroll container that clips sticky positioning. Walk every wrapper and remove stray overflow. You also need a real offset like top-0, because sticky with no threshold never engages. Demo 07 also caps the rail with max-h-screen plus its own overflow-y-auto, so a long table of contents scrolls inside the sticky pane rather than overflowing past the viewport.
How do I keep an icon-only collapsed rail accessible?
When labels disappear in the collapsed rail (demos 02, 06, 14) each link becomes an unlabelled icon, so add aria-label to every control and mark the decorative glyph with aria-hidden="true". The hover tooltips are a visual nicety, not an accessibility feature — keyboard and screen-reader users never fire hover, so the aria-label is what actually announces each destination. Keep targets at least 44px (demo 14 pins them there) so they stay tappable. Mark the active page with aria-current="page", never colour alone. If the collapse is a real button, give it aria-expanded reflecting the open state and aria-controls pointing at the rail. And never strip the focus ring in the collapsed state — a Tab user needs to see which icon is focused when there's no text beside it, and focus-visible: keeps it from showing on mouse clicks.
How do I switch a sidebar to a bottom navigation bar on mobile?
Demo 04 renders one <nav> and restyles it at the breakpoint rather than shipping two markup blocks. Below md it's a fixed bottom bar — fixed bottom-0 inset-x-0 flex with items spread evenly; at md and up those classes flip to a vertical column pinned left. A single <nav> means one source of truth for the links and no duplicated ARIA to drift out of sync. Two details matter on phones: add pb-[env(safe-area-inset-bottom)] so the bar clears the iOS home indicator, and give the main content matching bottom padding so the fixed bar never covers the last row. Labels drop to icon-plus-caption at the bottom size. Don't try to animate the layout switch — it's a hard breakpoint swap, and transitioning between a fixed bottom bar and a flex column just produces jank with no payoff.
Should I use the CSS resize property or container queries for a resizable sidebar?
They solve different halves of the problem. Demo 27 makes the rail user-draggable with resize-x plus overflow-auto and a min-w/max-w clamp — the browser draws the handle and does the width maths, with no pointer listeners or drag state. What it does not do is change what's inside as the width changes. That's demo 29's job: an @container query makes the nav respond to its own width, so labels hide and icons centre once the rail drops below a threshold, independent of the viewport. Combine them — resize-x for the drag, a container query for the adaptive contents — and the rail both resizes and reflows. The gotcha with resize: it only shows a handle when overflow is not visible, and it's mouse-only, so treat it as an enhancement, never your mobile story.
When should I avoid a fixed sidebar or off-canvas drawer?
A permanent fixed rail (demos 09, 11) costs 240px-plus of horizontal space — fine on a dashboard, wrong on a content site read mostly on phones, where you should collapse to a drawer or the bottom-bar pattern below md. The off-canvas overlay drawers (demos 10, 19) are modal: they trap the page behind a scrim, so don't use them for primary navigation a user needs while reading — a push-content drawer (demo 18) or a persistent rail keeps context visible. Reserve the frosted floating showpieces (demos 16, 30) for marketing shells; heavy backdrop-blur plus backdrop-saturate is a genuine paint cost over long scrolling lists and on low-end devices. And skip the pure-CSS :target tree (demo 23) when a link must survive a refresh or deep-link — :target writes to the URL hash and will hijack the back button in ways users don't expect.
