Example

Two-column layout with sidebar and main content for documentation and content-heavy pages

Current Configuration
Props used for this example
<SidebarLayout
  sidebar={<Sidebar />}
  position="left"
  sidebarWidth="16rem"
  stickySidebar
  gap="2rem"
>
  {children}
</SidebarLayout>
Available Props
Customize the SidebarLayout behavior
sidebarReact.ReactNoderequired

Sidebar content

position"left" | "right"default: "left"

Sidebar position

sidebarWidthstring | numberdefault: "16rem"

Sidebar width (CSS value)

gapstring | numberdefault: "2rem"

Gap between sidebar and content

breakpoint"sm" | "md" | "lg" | "xl" | "2xl"default: "lg"

Breakpoint where sidebar appears (Tailwind breakpoint)

stickySidebarbooleandefault: false

Make sidebar sticky (scroll with page)

sidebarHeightstringdefault: "100vh"

Sidebar height when sticky

Left Sidebar (Current)
Sidebar on the left, content on the right
<SidebarLayout
  sidebar={<Nav />}
  position="left"
>
  <Content />
</SidebarLayout>
Right Sidebar
Sidebar on the right, content on the left
<SidebarLayout
  sidebar={<TOC />}
  position="right"
>
  <Content />
</SidebarLayout>
Documentation Sites
Perfect for technical documentation

Left sidebar for navigation, main content for docs, and optional right sidebar for table of contents.

Blog Posts
Enhanced reading experience

Main content for article, sidebar for related posts, tags, or author information.

Settings Pages
Organized settings navigation

Left sidebar for settings categories, main area for form controls.

E-commerce Filters
Product browsing with filters

Left sidebar for filters and categories, main area for product grid.

Content Section 1
Demonstrating scrolling behavior with sticky sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Notice how the sidebar remains visible as you scroll through the content. This is particularly useful for navigation or table of contents.

Content Section 2
Demonstrating scrolling behavior with sticky sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Notice how the sidebar remains visible as you scroll through the content. This is particularly useful for navigation or table of contents.

Content Section 3
Demonstrating scrolling behavior with sticky sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Notice how the sidebar remains visible as you scroll through the content. This is particularly useful for navigation or table of contents.