Back to showcase
Layout Components
Structural components that define page shells and layout regions. These are used via layout files, not directly in markdown.
ThreePanelLayout
Three-panel layout: sidebar (inherited) + main content + code examples panel. Used by ApiLayout for endpoint pages.
Sidebar
Content (~55%)
Code Panel (~45%)
| Prop | Type | Description |
|---|---|---|
| children | Snippet | Main content area (center panel) |
| codeExamples | Snippet? | Code examples panel (right side on xl+) |
<ThreePanelLayout>
{#snippet children()}
<h1>Endpoint title</h1>
<ParameterList parameters={params} />
{/snippet}
{#snippet codeExamples()}
<CodeTabs examples={codeExamples} />
{/snippet}
</ThreePanelLayout>TableOfContents
"On this page" sidebar navigation showing heading anchors with active state tracking.
| Prop | Type | Description |
|---|---|---|
| items | TocItem[] | Array of heading items with id, text, level, children |
| activeId | string? | Currently active heading id |
Sidebar
Responsive navigation sidebar with collapsible sections. Renders as a drawer on mobile, fixed panel on desktop. Automatically generated from content files in the API section.
| Prop | Type | Description |
|---|---|---|
| sections | NavSection[] | Navigation sections with items |
| activePath | string | Current active URL path |
| open | boolean? | Mobile drawer open state |
| onclose | () => void | Callback when mobile drawer closes |
TopBar
Fixed header with logo, section tabs (Docs, Get Started, API Reference), search trigger, and theme toggle. Rendered in the root layout.
| Prop | Type | Description |
|---|---|---|
| onMenuClick | () => void | Callback for mobile hamburger menu click |
Footer
Site footer with copyright and navigation links. Takes no props — reads from siteConfig.