Introduction

The Layout component provides a semantic page structure consisting of custom headers, side navigation bars (siders), main content regions, and footers. It supports custom sidebar sizing, breakpoint-based visibility, sticky pin scroll locks, and viewport-filling containers.

Within the Page Builder CMS, content authors and developers can configure semantic structural panels by placing cards, headers, stacks, and buttons into dedicated slot arrays.

Usage

These examples illustrate how content editors bind and structure semantic page templates.

1. Standard Header, Content, and Footer Page Shell

A standard document or article layout with semantic top headers and bottom footer panels.

{
  "type": "layout",
  "header": [
    { "type": "heading", "text": "Site Brand Header", "as": "h4", "size": "sm" }
  ],
  "content": [
    { "type": "text", "content": "Main Article and Interactive Content" }
  ],
  "footer": [
    { "type": "text", "content": "© 2026 Acme Corp. All rights reserved.", "size": "xs" }
  ]
}

2. Dashboard Shell with Side Navigation (Sider)

Adds a navigation drawer or rail to the left of the main content region. Siders can have custom sm, md, or lg widths and be configured to collapse automatically on small mobile viewports.

{
  "type": "layout",
  "siderWidth": "sm",
  "siderHideBelow": "md",
  "header": [
    { "type": "heading", "text": "Dashboard System", "as": "h4", "size": "sm" }
  ],
  "sider": [
    {
      "type": "stack",
      "direction": "vertical",
      "gap": "2",
      "children": [
        { "type": "text", "content": "Analytics Overview", "size": "sm" },
        { "type": "text", "content": "Cloud Infrastructure", "size": "sm" }
      ]
    }
  ],
  "content": [
    { "type": "text", "content": "Cloud systems are operational. Latency is within normal bounds." }
  ]
}

3. Nested Layout Composition

Layouts can be cleanly nested inside other layouts. This is useful when you want a full-width site header and footer, but want only the middle body content to include side navigation.

{
  "type": "layout",
  "header": [
    { "type": "heading", "text": "Global Full-Width Header", "as": "h3" }
  ],
  "content": [
    {
      "type": "layout",
      "siderWidth": "md",
      "sider": [
        { "type": "text", "content": "Nested Sidebar Rail" }
      ],
      "content": [
        { "type": "text", "content": "Nested Content Body" }
      ]
    }
  ],
  "footer": [
    { "type": "text", "content": "Global Full-Width Footer", "size": "xs" }
  ]
}

Props

Developer Notes & Accessibility

• Nesting Rules & Depth Cap: Sveltia CMS enforces a visual nesting cap of roughly four levels in the editor interface. This depth limit restricts what can be built via the UI, but does not limit the layout compiler—manually authored JSON templates can nest layouts as deeply as necessary.
• Semantic Element Mapping: This component maps directly to valid, semantic HTML5 elements: <header>, <aside>, <main>, and <footer>.
• Skip Navigation Compatibility: When using custom headers and footers, ensure headings are sequenced logically (e.g., starting with an h1 on the page) to maintain high accessibility scores.