HTML Template with Sidebar 2026

Responsive Sidebar Layout — CSS Grid Code

/* ── 2-column: sidebar + main ─── */
.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}
.sidebar {
  position: sticky;
  top: 80px; /* below fixed nav */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
/* ── Mobile: stack vertically ─── */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    max-height: none;
  }
}

Sidebar Use Cases

Blog Sidebar

E-commerce Filters

Left sidebar with: category checkboxes, price range slider, colour swatches, size selector, "Apply Filters" button. Sticky on desktop. Collapses to a "Filter" bottom sheet on mobile.

Table of Contents

Documentation / Articles

Right sidebar with jump links to H2/H3 headings. Active state highlights current section as user scrolls. Built with IntersectionObserver. Standard pattern for docs sites and long-form articles.

Sidebar Responsive Patterns

Desktop	Tablet	Mobile	Best For
Fixed left sidebar	Collapsible (icon only)	Off-canvas drawer	Dashboards, admin
Sticky right sidebar	Below content	Hidden / expandable	Blogs, docs
Filter left sidebar	Below content	Bottom sheet modal	E-commerce
TOC right sidebar	Below heading	Sticky top bar	Long articles

Get All 180+ Templates — $35 One-Time

Commercial licence · No subscription · Instant download · Lifetime updates

Download All 180+ Templates — $35

One payment · Own the files forever · Used by 500+ agencies worldwide

Frequently Asked Questions

How do I create a sidebar layout in HTML CSS?

Use CSS Grid: `.layout { display:grid; grid-template-columns: 260px 1fr; gap:32px; align-items:start }`. Make it sticky: `.sidebar { position:sticky; top:80px; max-height:calc(100vh - 100px); overflow-y:auto }`. Responsive: `@media(max-width:768px) { .layout { grid-template-columns:1fr } .sidebar { position:static } }`. Full copy-paste code above.

How do I make a sticky sidebar in HTML?

Sticky sidebar: `position:sticky; top:80px` (adjust top value to be below your fixed navbar height). Add `align-items:start` to the parent grid/flex container — without this, the sidebar stretches to match the content height and sticky doesn't work. Add `max-height:calc(100vh - 100px); overflow-y:auto` if the sidebar content is taller than the viewport.

How do I make a collapsible sidebar in HTML JavaScript?

Toggle class approach: add `class='sidebar'` to sidebar element. JS: `document.querySelector('.toggle-btn').addEventListener('click', () => document.querySelector('.sidebar').classList.toggle('collapsed'))`. CSS: `.sidebar.collapsed { width:60px; overflow:hidden }` with `transition: width .3s ease`. Icon-only state: hide text labels, keep icons visible at 60px width.

What width should a sidebar be?

Sidebar widths by use case: Navigation sidebar (dashboards): 240–280px. Blog sidebar: 280–320px. Filter sidebar (e-commerce): 220–260px. Table of contents: 200–240px. Icon-only collapsed: 56–72px. Rule: sidebar should never exceed 30% of the page width on desktop. On screens under 768px, collapse or hide the sidebar — mobile users need full-width content.

Should I put the sidebar on the left or right?

Left sidebar: navigation menus, filters — things users need before reading content. Left is the first thing eyes hit on LTR pages. Right sidebar: supplementary content (TOC, related posts, newsletter) — things that complement content the user is already reading. Research: left-side CTAs convert 10–15% better than right-side. For blog monetisation, left sidebar ad placement outperforms right.

HTML Template with Sidebar Layout 2026