DocsLayout

Documentation page layout with header hero, sticky table of contents, scrollspy, and a responsive content column.

01 Examples

Page-level layout, shown as code

Basic page

Title, description, and a ToC driven by the navigation array — each entry's id must match a Section id.

<DocsLayout
  title="Badge"
  description="Status and labels"
  maxWidth="lg"
  showToc
  navigation={[
    { id: 'examples', title: 'Examples' },
    { id: 'api', title: 'API Reference' }
  ]}
>
  <Section id="examples" title="Examples">...</Section>
  <Section id="api" title="API Reference">...</Section>
</DocsLayout>

Collapsing hero with breadcrumbs

Passing breadcrumbs enables the sticky-bar pattern: crumbs + code toggle first, then a compact bar with title and scrollspy once the header scrolls away. stability and sourceHref render the editorial badge and source link.

<DocsLayout
  title="Combobox"
  description="Searchable single-select input"
  breadcrumbs={[
    { label: 'Blocks', href: '/blocks' },
    { label: 'Primitives', href: '/blocks/primitives' }
  ]}
  stability="stable"
  sourceHref="https://example.com/blob/main/Combobox.svelte"
  showToc
  navigation={nav}
>
  <Section id="playground" title="Playground">...</Section>
</DocsLayout>

02 Accessibility

The landmarks a page gets for free

The layout renders the page's <main>, the table of contents as a named <nav>, and the breadcrumb strip as a second one. A page built on it therefore starts with a complete landmark set — which is why hand-rolling a breadcrumb row instead of passing breadcrumbs costs more than the sticky bar.

Scroll-spy marks, it does not move focus

Scrolling sets aria-current="location" on the active table-of-contents link and changes nothing else. Focus stays where the reader put it — dragging it along with the scroll position would make the page unusable with a keyboard.

The collapsing hero keeps its heading

When the header scrolls away the compact bar takes over visually, but the page's <h1> stays in the document — the bar is a second presentation of it, not a replacement. A screen reader still finds one, and only one, top-level heading.

Reader-controlled code visibility

The code toggle in the header is a real control with aria-pressed, and every CodeExample on the page follows it. Someone who reads code rather than previews sets it once instead of expanding each example.

03 API Reference

Complete list of component properties and their configurations

17 props

Prop	Type	Default	Description
`breadcrumbs`	`BreadcrumbItem[]`	—	Structured breadcrumb trail (ancestors only, title is appended automatically). Enables the collapsing-hero sticky bar layout.
`centered` variant	true	`false`	Controls the centered behavior and appearance of the DocsLayout component. Available options: true.
`children`	`Snippet`	—	Content to render inside the DocsLayout component
`class`	`string`	—	Extra classes merged onto the root container.
`description`	`string`	—	Short description rendered below the title.
`maxWidth` variant	2xl7xllgmd +2 more	`lg`	Controls the maxWidth behavior and appearance of the DocsLayout component. Available options: 2xl, 7xl, lg, and 3 more.
`navigation`	`TocNavigationItem[]`	`[]`	Navigation items for the table of contents (nested children supported).
`related`	`RelatedLink[]`	—	Optional related-links list — passed through to the TableOfContents as a `// RELATED` block below the page sections. Each entry needs a pre-resolved `href`; the layout does not call `resolve()` on it.
`showCodeToggle`	`boolean`	`true`	Show the global code-visibility toggle for collapsing all code examples.
`showToc`	`boolean`	`false`	Show a sticky table of contents sidebar on desktop and a collapsible one on mobile.
`sidebar` variant	true	`false`	Controls the sidebar behavior and appearance of the DocsLayout component. Available options: true.
`slotClasses`	`Partial<Record<DocsLayoutSlots, string>>`	—	Per-slot class overrides.
`sourceHref`	`string`	—	GitHub blob URL for the component's source file — rendered as a `source ↗` link next to the stability badge when present.
`stability`	experimentalbetastabledeprecated	—	Editorial stability badge — drives the `[STABLE]` / `[BETA]` / etc. stamp above the page title. When omitted, no badge renders; the default is applied upstream in docs-gen, so component pages receive `'stable'` automatically via `componentData?.stability`.
`title`	`string`	—	Page title rendered as an h1 in the header area.
`unstyled`	`boolean`	`false`	Remove all default tv styles.
`...DocsLayoutVariantProps` variant	`VariantProps`	—	Styling variants from DocsLayoutVariantProps

04 Types

Local type definitions used by this component.

6 types

Only referenced

Name	Kind	Category	Used by	Description
BreadcrumbItem	interface	helper	1	—
DocsLayoutProps	interface	props	0	Standard documentation page layout with optional table of contents. Provides a responsive two-column layout with a mobile ToC fallback. When `breadcrumbs` is provided, the layout uses a collapsing-hero pattern: a unified sticky bar shows breadcrumbs + code toggle initially, then transitions to a compact bar with title + scrollspy when the header scrolls out of view.
DocsLayoutVariantProps	type	variant	1	—
DocsLayoutSlots	type	variant	0	Slot names derived from the `tv()` config above — single source of truth for `slotClasses`.
RelatedLink	interface	helper	1	—
TocNavigationItem	interface	helper	1	A single entry in the table of contents. The list renders in array order. There is deliberately no `order` field: one existed until 2026-08, was never read by anything, and 119 pages maintained it — 660 entries — the Button reference page had drifted to `api: 7` / `installation: 6` while rendering them the other way round, and nobody noticed because nothing sorts. Order the array; that is the order.

05 Installation

Import

import { DocsLayout } from '@urbicon-ui/docs';

llm.txt