DocsLayout

The main wrapper component for standard documentation pages in Boltdocs.

The DocsLayout component is the high-level container that structures standard documentation pages.

The DocsLayout primitive and its companion layout modules are structured using a composable subcomponent pattern. This lets you define the exact HTML wrappers and inject custom style classes around headers, sidebars, and content regions.

Here's an example showing how to assemble a complete custom layout using only primitives (without relying on pre-styled theme files):

tsx

// docs/layout.tsx
import {
  DocsLayout,
  Navbar,
  Sidebar,
  OnThisPage,
  Breadcrumbs,
  PageNav,
  ErrorBoundary
} from 'boltdocs/primitives'
import { useRoutes } from 'boltdocs/client'

export default function CustomLayout({ children }) {
  // Query routes and active page details from context
  const { routes, currentRoute } = useRoutes()

  return (
    <DocsLayout className="selection:bg-primary-500/10">
      {/* Composable Navbar Primitive */}
      <Navbar className="bg-white dark:bg-black border-b">
        <Navbar.Content>
          <Navbar.Left>
            <Navbar.Logo src="/logo-light.svg" alt="Branding" />
            <Navbar.Title>Framework Docs</Navbar.Title>
          </Navbar.Left>
          <Navbar.Right>
            {/* Add custom search dialog triggers or theme toggles here */}
          </Navbar.Right>
        </Navbar.Content>
      </Navbar>

      <DocsLayout.Body className="bg-zinc-50 dark:bg-zinc-950">
        {/* Composable Sidebar Primitive */}
        <Sidebar className="border-r">
          <Sidebar.Content>
            <Sidebar.Items routes={routes} />
          </Sidebar.Content>
        </Sidebar>

        {/* Content Shell */}
        <DocsLayout.Content className="scroll-smooth">
          <DocsLayout.ContentMdx className="max-w-4xl pt-8 pb-20">
            {/* Header section containing breadcrumbs and page details */}
            <DocsLayout.Header>
              <Breadcrumbs />
              {currentRoute?.title && (
                <h1 className="text-3xl font-bold mt-4">{currentRoute.title}</h1>
              )}
              {currentRoute?.description && (
                <p className="text-zinc-500 mt-2">{currentRoute.description}</p>
              )}
            </DocsLayout.Header>

            {/* Main MDX content wrapped inside an Error Boundary */}
            <ErrorBoundary>
              <article className="prose dark:prose-invert">
                {children}
              </article>
            </ErrorBoundary>

            {/* Previous/next navigation */}
            <div className="mt-12">
              <PageNav />
            </div>
          </DocsLayout.ContentMdx>
        </DocsLayout.Content>

        {/* Composable Table of Contents (Scroll Tracker) */}
        <OnThisPage headings={currentRoute?.headings} />
      </DocsLayout.Body>
    </DocsLayout>
  )
}

Below is a complete, production-ready reference implementation demonstrating how to build a unified page wrapper. It wires together custom Navbar, Sidebar, breadcrumbs, previous/next page navigation guides, alternate global error boundary views, and table-of-contents sidebars:

tsx

// docs/components/ProductionLayout.tsx
import React from 'react'
import { DocsLayout } from 'boltdocs/primitives'
import { useRoutes, useConfig } from 'boltdocs/client'
import ProductionNavbar from './ProductionNavbar'
import ProductionSidebar from './ProductionSidebar'
import CustomBreadcrumbs from './CustomBreadcrumbs'
import CustomPageNav from './CustomPageNav'
import CustomErrorBoundary from './CustomErrorBoundary'
import CustomOnThisPage from './CustomOnThisPage'

interface LayoutProps {
  children?: React.ReactNode
}

export default function ProductionLayout({ children }: LayoutProps) {
  const { routes, currentRoute } = useRoutes()
  const config = useConfig()

  return (
    <DocsLayout className="selection:bg-primary-500/10 selection:text-primary-500 min-h-screen">
      {/* 1. Cohesive Header Navigation */}
      <ProductionNavbar />

      {/* 2. Main Page Body */}
      <DocsLayout.Body className="bg-main">
        
        {/* Responsive Sidebar Component */}
        <ProductionSidebar />

        {/* 3. Central reading content flow */}
        <DocsLayout.Content className="scroll-smooth">
          <DocsLayout.ContentMdx className="max-w-5xl px-4 pt-8 pb-24 mx-auto">
            
            {/* Header: breadcrumb trails and dynamic page meta-title details */}
            <DocsLayout.Header>
              <div className="mb-4 border-b border-subtle pb-4">
                <CustomBreadcrumbs />
              </div>

              {currentRoute?.title && (
                <h1 className="text-4xl font-bold tracking-tight text-body mb-3">
                  {currentRoute.title}
                </h1>
              )}
              {currentRoute?.description && (
                <p className="text-lg text-muted mb-6 leading-relaxed">
                  {currentRoute.description}
                </p>
              )}
            </DocsLayout.Header>

            {/* Main content body wrapped in an Error Boundary */}
            <CustomErrorBoundary>
              <div className="prose dark:prose-invert max-w-none">
                {children}
              </div>
            </CustomErrorBoundary>

            {/* Previous/next navigation */}
            <div className="mt-12">
              <CustomPageNav />
            </div>

          </DocsLayout.ContentMdx>
        </DocsLayout.Content>

        {/* 4. Right-hand table of contents column */}
        <CustomOnThisPage
          headings={currentRoute?.headings}
          editLink={config.theme?.editLink}
          communityHelp={config.theme?.communityHelp}
          filePath={currentRoute?.filePath}
        />
      </DocsLayout.Body>
    </DocsLayout>
  )
}

The DocsLayout primitive provides the following slot container components:

Component	HTML Tag	Description	Props
`DocsLayout.Root` / `DocsLayout`	`<div>`	Top-level flex column container for the entire site page layout.	`ComponentBaseProps`
`DocsLayout.Body`	`<div>`	Flex row wrapper grouping the sidebar, main content area, and right-column table of contents.	`ComponentBaseProps`
`DocsLayout.Content`	`<main>`	Scrollable outer container of the main page reading flow.	`ComponentBaseProps`
`DocsLayout.ContentMdx`	`<div>`	Padded content container imposing maximum reading constraints.	`ComponentBaseProps`
`DocsLayout.Header`	`<header>`	Top section wrapper within the reading flow (e.g., for breadcrumbs and title).	`ComponentBaseProps`

All primitive subcomponents accept these common props for styling and content injection:

Property	Type	Default	Description
`children`	`ReactNode`	`undefined`	The content elements to render inside the container.
`className`	`string`	`undefined`	Custom Tailwind or CSS classes for utility styling.
`style`	`CSSProperties`	`undefined`	Inline style overrides.

The DocsLayout primitive is style-neutral: it is pure composition — slot containers (children, navbar, sidebar, content, onThisPage) that accept className and expose no state attributes. Every visual decision (backgrounds, borders, spacing, column widths) belongs to the site theme through the className on each slot.

State / Slot	Mechanism
`DocsLayout` (root)	`<div>` flex column for the whole page; `bg-main text-body` come from theme tokens
`DocsLayout.Body`	`<div>` flex row grouping the sidebar, content, and on-this-page columns
`DocsLayout.Content`	`<main>` scrollable reading column
`DocsLayout.ContentMdx`	`<div>` padded, centered max-width reading container
`DocsLayout.Header`	`<header>` slot for breadcrumbs and the page title

tsx

<DocsLayout className="min-h-screen bg-main text-body">
  <DocsLayout.Body>
    <Sidebar className="w-64 border-r border-subtle" />
    <DocsLayout.Content className="bg-main">
      <DocsLayout.ContentMdx className="mx-auto w-full max-w-4xl px-6 py-8">
        <DocsLayout.Header className="mb-8 border-b border-subtle pb-6">
          <Breadcrumbs />
          <h1 className="mt-3 text-3xl font-bold text-body">{title}</h1>
        </DocsLayout.Header>
        {children}
      </DocsLayout.ContentMdx>
    </DocsLayout.Content>
  </DocsLayout.Body>
</DocsLayout>

Jesús Alcalá

Last updated on October 18, 2026

DocsLayout

Composable Layout Assembly Example

Real-World Production Reference

Composable Subcomponents

Component Props

ComponentBaseProps (Common)

Customization & states

Was this page helpful?

Composable Layout Assembly ExampleLink

Real-World Production ReferenceLink

Composable SubcomponentsLink

Component PropsLink

ComponentBaseProps (Common)Link