Sidebar Layout
Two-column layout with a fixed or fluid sidebar — the backbone of docs, dashboards, and blog archives.
Left Sidebar — Fixed
Fixed 240px sidebar; main content fills the remaining width. The default pattern for documentation sites.
Overview
Welcome to Acme Docs. This sidebar is 240px wide and fixed — it never grows or shrinks regardless of the viewport width.
Sidebar width
Fixed 240px (15rem)
Content width
flex-1 fills remainder
Classes: flex h-full wrapper · sidebar w-60 border-r · content flex-1 overflow-y-auto
Right Sidebar
Main content left, supporting sidebar right. Common for article pages with table of contents or related links.
Article Title
The main content column is on the left and grows to fill all available space. The right sidebar is a narrower, secondary column.
Scroll position, reading progress, and contextual links live in the right panel without interrupting reading flow.
Reverse column order: content first in DOM (flex-1), sidebar after (w-52 flex-shrink-0).
Collapsible Sidebar
Toggle open/closed via Alpine.js. The sidebar width collapses with a CSS transition; nav labels fade out independently.
Click the arrow button to collapse or expand the sidebar.
Width animates from 14rem → 3.5rem. Nav labels fade independently.
Alpine: x-data="{ open: true }" · toggle with @click="open = !open"
Sticky Sidebar
The sidebar sticks to the top of the scrollable shell while the main content scrolls independently.
Section 1
Scroll this panel to see the sidebar remain in place. Each section represents a chunk of long-form content that the reader navigates via the fixed left sidebar.
Section 2
Scroll this panel to see the sidebar remain in place. Each section represents a chunk of long-form content that the reader navigates via the fixed left sidebar.
Section 3
Scroll this panel to see the sidebar remain in place. Each section represents a chunk of long-form content that the reader navigates via the fixed left sidebar.
Section 4
Scroll this panel to see the sidebar remain in place. Each section represents a chunk of long-form content that the reader navigates via the fixed left sidebar.
Section 5
Scroll this panel to see the sidebar remain in place. Each section represents a chunk of long-form content that the reader navigates via the fixed left sidebar.
Sidebar: sticky top-0 self-start h-full overflow-y-auto — content column: flex-1 overflow-y-auto
Mini Rail Sidebar
Ultra-compact icon-only navigation rail. Hover reveals a tooltip; click expands the full sidebar.
The rail collapses to icon-only mode (56px wide). Click the hamburger to reveal labels.
Each icon carries a native title attribute as a tooltip fallback in collapsed state.
Tip: pair this with a tooltip DaisyUI class for richer hover labels in the collapsed state.