5 Pure CSS2 with JSPublished 2026-10-05Free · no sign-up
Seven sidebar layouts: a fixed filter sidebar beside fluid content, a sidebar that collapses to an icon rail, a right-hand aside, a flexbox sidebar that decides when to stack, an off-canvas sidebar for small screens, a three-part docs layout and a feed with sidebars on both sides.
A fixed-width sidebar beside a main area that takes all the remaining space: grid-template-columns: 180px minmax(0, 1fr). The minmax(0, …) matters, because without it a wide table or long URL in the main area would push the layout off screen.
View code
<div class="sbl1"><div class="in"><aside><b>Filters</b><label><input type="checkbox" checked> In stock</label><label><input type="checkbox"> On sale</label></aside><main><p>32 products</p><div class="g"><i></i><i></i><i></i><i></i></div></main></div></div>
A sidebar that collapses to an icon rail and expands to show labels. The toggle is a button with aria-expanded, the labels stay in the DOM as visually hidden text when collapsed so each icon link keeps its name, and the width transition is on a grid column.
var w = document.querySelector('.sbl2'), b = w.querySelector('button');
b.onclick = function () { var mini = w.classList.toggle('mini'); b.setAttribute('aria-expanded', !mini); b.setAttribute('aria-label', mini ? 'Expand sidebar' : 'Collapse sidebar'); b.textContent = mini ? '⟩' : '⟨'; };
03. Content with Right Aside
SidebarArticle
An article with related links in a right-hand aside, which drops below the article on narrow containers. The aside is complementary content, so it uses the aside element with a heading, and it comes after the article in the source.
View code
<div class="sbl3"><div class="in"><article><h3>Packing for a week with one bag</h3><p>Roll, don't fold. Pick two colours that go together. Wear the bulky shoes.</p></article><aside aria-labelledby="sbl3h"><h4 id="sbl3h">Related</h4><ul><li><a href="#r1">Carry-on size guide</a></li><li><a href="#r2">Our travel kit list</a></li></ul></aside></div></div>
A sidebar layout that decides for itself when to stack: the sidebar has a fixed basis, the main area has flex-grow: 999 and a minimum of half the container, and flex-wrap does the rest. When the main area would drop below 50 percent, it wraps.
View code
<div class="sbl4"><aside>Sidebar · 160px</aside><main>Main · grows, min 50%</main></div>
On wide containers the sidebar sits beside the content; on narrow ones it is hidden off to the side and slides in over the content when the Menu button is pressed. When closed it is inert, so keyboard users never tab into links they cannot see.
View code
<div class="sbl5"><div class="in"><button class="mb" aria-expanded="false" aria-controls="sbl5n">Menu</button><nav id="sbl5n" aria-label="Sections"><a href="#a">Overview</a><a href="#b">Billing</a><a href="#c">Team</a></nav><main><h3>Overview</h3><p>Your account at a glance.</p></main></div></div>
var b = document.querySelector('.sbl5 .mb'), n = document.getElementById('sbl5n');
function sync() { var small = getComputedStyle(b).display !== 'none'; n.inert = small && !n.classList.contains('open'); }
b.onclick = function () { var o = n.classList.toggle('open'); b.setAttribute('aria-expanded', o); sync(); };
new ResizeObserver(sync).observe(document.querySelector('.sbl5'));
06. Docs Layout with Nav and Contents
SidebarDocs
The three-part documentation layout: section navigation on the left, the page in the middle and an on-this-page list on the right. The right column disappears first as space shrinks, then the left one moves above the content.
View code
<div class="sbl6"><div class="in"><nav aria-label="Docs"><b>Guides</b><a href="#install">Install</a><a href="#theme" aria-current="page">Theming</a><a href="#deploy">Deploy</a></nav><article><h3>Theming</h3><p>Every colour is a custom property you can override.</p></article><aside aria-label="On this page"><b>On this page</b><a href="#tokens">Tokens</a><a href="#dark">Dark mode</a></aside></div></div>
A social-feed style layout with navigation on the left, the feed in the middle and suggestions on the right, all on one grid. The middle column has a maximum readable width with minmax(0, 520px), and the side columns share whatever is left.
grid-template-columns: 180px minmax(0, 1fr) gives a fixed sidebar and a main area that takes the rest without overflowing. The minmax matters when the main area holds tables or long words.
Collapsed does not mean nameless
An icon rail still needs names. Keep each label in the DOM as visually hidden text when the sidebar collapses, and give the toggle aria-expanded.
Hide off-canvas content properly
A sidebar slid off screen is still in the tab order unless you remove it. The inert attribute takes the whole panel out of focus and the accessibility tree while it is closed.
Let the layout decide
With flexbox, a sidebar with a fixed basis and a main area with a large flex-grow and a minimum width will stack by itself when space runs out, no breakpoint required.
Frequently asked questions
Left or right sidebar?
Navigation usually goes left; related or supplementary content goes right.
Should the sidebar be sticky?
For long pages, often yes. See the sticky elements collection.
Is aside the right element for a sidebar?
For complementary content, yes. A sidebar of site navigation is a nav.