Introduction

Imbriquer un <Layout> dans le contenu d'un autre <Layout> ou dans des enfants imbriqués pour créer un composite coquilles, par ex. une mise en page externe avec un en-tête/pied de page et une mise en page interne tenant un rail sidenav.

Utilisation

En-tête + Contenu + Pied de page

Sans « sider », les pièces s'empilent dans une seule colonne.

import { Layout } from "../components/ui";

export default function MyPage() {
  return (
    <Layout
      header={<SiteHeader />}
      content={<Article />}
      footer={<SiteFooter />}
    />
  );
}

En-tête + Côté + Contenu

Passer sider l'enveloppe ainsi que content dans une rangée. siderWidth choisit un rail largeur (sm 14rem, md 16rem par défaut, lg 18rem) ; siderHideBelow se cache le rail sous un point d'arrêt pour les petits écrans.

import { Layout } from "../components/ui";

export default function MyPage() {
  return (
    <Layout
      header={<SiteHeader />}
      sider={<Sidenav />}
      siderWidth="sm"
      siderHideBelow="md"
      content={<Article />}
    />
  );
}

En-tête et côté collants

stickyHeader épingle l'en-tête en haut du défilement de la page. stickySider épingle le sider en dessous et fait défiler son propre débordement - utile pendant une longue période nav à côté du contenu court, ou vice versa. fullHeight remplit la fenêtre d'affichage pour le shell de la page le plus externe.

import { Layout } from "../components/ui";

export default function DocsPage() {
  return (
    <Layout
      fullHeight
      stickyHeader
      stickySider
      header={<SiteHeader />}
      sider={<DocsSidenav />}
      siderHideBelow="md"
      content={<Article />}
    />
  );
}

Disposition imbriquée

Imbriquer un <Layout> à l'intérieur du content lorsque l'en-tête/le pied de page s'étend sur toute la longueur largeur mais seule une partie de la carrosserie a besoin d'une barrière latérale :

import { Layout } from "../components/ui";

export default function MyPage() {
  return (
    <Layout
      header={<SiteHeader />}
      content={
        <Layout sider={<Sidenav />} content={<Article />} />
      }
      footer={<SiteFooter />}
    />
  );
}

Constructeur de pages CMS

Ce composant est disponible sous forme de bloc « layout » dans le Page Builder (content/pages/*.json). 'en-tête', sider, content et footer sont chacun une liste de blocs de composants — n'importe lesquels le type de bloc fonctionne, y compris une autre « mise en page » pour les shells imbriqués :

{
  "type": "layout",
  "siderWidth": "sm",
  "siderHideBelow": "md",
  "header": [
    { "type": "heading", "text": "Dashboard", "as": "h3", "size": "lg" }
  ],
  "sider": [
    {
      "type": "stack",
      "direction": "vertical",
      "gap": "2",
      "children": [
        { "type": "link", "text": "Overview", "href": "#" },
        { "type": "link", "text": "Reports", "href": "#" }
      ]
    }
  ],
  "content": [
    { "type": "text", "content": "Pick a page from the rail on the left." }
  ],
  "footer": [
    { "type": "text", "size": "sm", "content": "© 2026 Acme" }
  ]
}

Laisser la liste d'une pièce vide (ou l'omettre) ignore le wrapper de cette pièce élément entièrement — un champ facultatif intact comme siderWidth/siderHideBelow arrive sous la forme "" du CMS et est traité comme non défini, retombant sur le composant par défaut.

Propriétés

Mise en page

Propriété	Type	Description
header	`string | JSX.Élément`	Rendered inside a semantic <header> above the body. (Shorthand API only)
sider	`string | JSX.Élément`	Rendered inside a semantic <aside> rail. Its presence switches the body to a row of sider + content. (Shorthand API only)
content	`string | JSX.Élément`	Rendered inside a semantic <main>. children are appended after it. (Shorthand API only)
footer	`string | JSX.Élément`	Rendered inside a semantic <footer> below the body. (Shorthand API only)
fullHeight	boolean	Remplissez la hauteur de la fenêtre d'affichage - pour le shell de la page le plus à l'extérieur.
stickyHeader	boolean	Épinglez l’en-tête en haut du défilement de la page.
stickySider	boolean	Épinglez le côté sous un en-tête collant ; il défile en interne.
siderWidth	`"sm" | "md" | "lg"`	Sider rail width: sm (14rem), md (16rem, default), lg (18rem).
siderHideBelow	`"sm" | "md" | "lg"`	Hide the sider under this breakpoint. Pair with an in-flow disclosure.
hasSider	boolean	Forcez manuellement la direction de la présentation vers la ligne. (API composée)
headerClass	string	Classe supplémentaire pour la partie <header>. (API abrégée uniquement)
siderClass	string	Classe supplémentaire pour la partie <aside>. (API abrégée uniquement)
contentClass	string	Classe supplémentaire pour la partie <main>. (API abrégée uniquement)
footerClass	string	Classe supplémentaire pour la partie <footer>. (API abrégée uniquement)
bodyClass	string	Classe supplémentaire pour le wrapper de ligne autour de sider + content (rendu uniquement lorsque sider est défini).
children	any	Enfants à restituer à l’intérieur du shell de mise en page.
class	string	Classes CSS personnalisées pour l'élément racine.