4 Tailwind2 with JSPublished 2026-10-05Free · no sign-up
Six ways to lay out a page with a sidebar: a fixed-width sidebar, one that collapses to icons, an aside on the right, an off-canvas drawer on a native dialog, a sticky table of contents and a documentation layout with grouped navigation.
A sidebar with a fixed width next to a content area that takes the rest, made with flex, w-28 shrink-0 on the sidebar and min-w-0 flex-1 on the content so long text never pushes the layout wider.
View code
<div class="flex h-56 w-full max-w-sm overflow-hidden rounded-xl ring-1 ring-slate-300">
<nav aria-label="Sections" class="w-28 shrink-0 bg-slate-900 p-3 text-sm">
<a href="#inbox" aria-current="page" class="block rounded-md bg-white/15 px-2 py-1.5 font-semibold text-white">Inbox</a>
<a href="#sent" class="mt-1 block rounded-md px-2 py-1.5 text-slate-300 hover:bg-white/10 hover:text-white">Sent</a>
<a href="#drafts" class="mt-1 block rounded-md px-2 py-1.5 text-slate-300 hover:bg-white/10 hover:text-white">Drafts</a>
</nav>
<div class="min-w-0 flex-1 bg-white p-3"><h3 class="font-bold text-slate-900">Inbox</h3><p class="mt-1 truncate text-sm text-slate-600">Your order has shipped and is on its way to you</p></div>
</div>
02. Tailwind Collapsible Sidebar
TailwindSidebarToggle
A sidebar that shrinks to an icon rail at the press of a button. A data attribute switches group-data-[collapsed] utilities that narrow the width and visually hide the labels with sr-only, so links keep their names.
var w = document.getElementById('twsl2'), b = document.getElementById('twsl2b');
b.onclick = function () { var c = !('collapsed' in w.dataset); if (c) w.dataset.collapsed = ''; else delete w.dataset.collapsed; b.setAttribute('aria-expanded', !c); b.setAttribute('aria-label', c ? 'Expand sidebar' : 'Collapse sidebar'); };
03. Tailwind Content with Right Sidebar
TailwindSidebarAside
An article with an aside on the right holding related links. flex-wrap lets the aside drop below the article when there is no room, using basis utilities to decide when that happens.
View code
<div class="flex w-full max-w-sm flex-wrap gap-3">
<article class="min-w-0 flex-[1_1_12rem] rounded-xl bg-white p-4 ring-1 ring-slate-200"><h3 class="font-bold text-slate-900">Caring for linen</h3><p class="mt-1 text-sm text-slate-600">Wash cool, dry flat and iron while still slightly damp for the softest finish.</p></article>
<aside aria-label="Related" class="flex-[1_1_7rem] rounded-xl bg-amber-50 p-4 ring-1 ring-amber-200"><h4 class="text-xs font-bold uppercase tracking-wider text-amber-900">Related</h4><ul class="mt-2 grid gap-1 text-sm"><li><a href="#wool" class="text-amber-900 underline-offset-2 hover:underline">Wool basics</a></li><li><a href="#stains" class="text-amber-900 underline-offset-2 hover:underline">Stain guide</a></li></ul></aside>
</div>
04. Tailwind Off-Canvas Sidebar Drawer
TailwindSidebarDialog
A sidebar that slides in from the left over the page, built on the native dialog element opened with showModal, so focus is trapped and Escape closes it. backdrop: utilities dim the page behind.
var d = document.getElementById('twsl4');
document.getElementById('twsl4o').onclick = function () { d.showModal(); };
d.querySelector('[data-close]').onclick = function () { d.close(); };
d.addEventListener('click', function (e) { if (e.target === d) d.close(); });
05. Tailwind Sticky Sidebar
TailwindSidebarSticky
A table of contents that stays in view while the long content beside it scrolls, using sticky top-0 and self-start. self-start stops the sidebar stretching to the full row height, which would stop it sticking.
View code
<div role="region" aria-label="Guide" tabindex="0" class="h-64 w-full max-w-sm overflow-y-auto rounded-xl bg-white ring-1 ring-slate-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-600">
<div class="flex gap-3 p-3">
<nav aria-label="On this page" class="sticky top-0 w-24 shrink-0 self-start text-xs"><p class="font-bold text-slate-900">On this page</p><a href="#intro" class="mt-1 block text-indigo-700 hover:underline">Intro</a><a href="#setup" class="mt-1 block text-indigo-700 hover:underline">Setup</a><a href="#deploy" class="mt-1 block text-indigo-700 hover:underline">Deploy</a></nav>
<div class="min-w-0 flex-1 text-sm text-slate-700"><h3 class="font-bold text-slate-900">Intro</h3><p class="mt-1 h-36">Scroll this panel: the contents list stays put.</p><h3 class="font-bold text-slate-900">Setup</h3><p class="mt-1 h-36">Install, configure and run the first build.</p><h3 class="font-bold text-slate-900">Deploy</h3><p class="mt-1 h-36">Push to production when the checks pass.</p></div>
</div>
</div>
06. Tailwind Docs Layout with Grouped Nav
TailwindSidebarDocs
A documentation layout with grouped navigation headings on the left and the page on the right. On a narrow screen the nav wraps above the content because both columns use flex-basis rather than fixed widths.