Layout

Canopy uses a flexible <Layout> component to structure MDX pages with consistent navigation, content areas, and optional tables of contents. This wrapper is typically defined in _layout.mdx files within the content/ directory tree to apply section-specific configurations.

content/├── essays/│   ├── _layout.mdx│   ├── empirical-research.mdx│   └── index.mdx└── about/    ├── _layout.mdx    └── index.mdx

In the case above:

• all pages under content/essays/ will inherit the layout defined in content/essays/_layout.mdx;
• while pages under content/about/ will use the layout from content/about/_layout.mdx.

---type: "essays"--- <Layout navigation={true} fluid={true}>  {props.children}</Layout>

API

The <Layout> component arranges the page into three distinct regions (sidebar navigation, main content, and optional on-page table of contents) and wires up global navigation metadata during build time.

Users can customize the layout using several options:

• navigation: toggles the left-hand sidebar that renders your section menu. Set it to false when you want a full-width document without navigation.
• sidebar: accepts a React node or render function to replace the default sidebar. null keeps the auto-generated navigation.
• contentNavigation: enables the right-hand table of contents generated from Markdown headings (## and deeper). Disable it when a page is short or when you want to hide the toc.
• fluid: switches the content container from a centered max-width layout to full-width gutters (useful for wide screenshots or tables).
• Class name props (className, contentClassName, sidebarClassName, contentNavigationClassName): allow fine-grained styling hooks when additional spacing or typography tweaks are required.

Page context

During the MDX build, heading data and navigation metadata are injected into the page context. <Layout> reads that context to:

• Build the section navigation directly from the content/ directory tree.
• Generate the table of contents from Markdown headings.
• Prefill component props such as pageTitle for downstream components like <ContentNavigation />.

Because the layout receives its configuration at build time, individual MDX files can stay lean—compose Markdown, set front matter (title, description, etc.), and let the wrapper render the chrome.

Customizing sections

If a section needs a different layout treatment, create or edit the relevant _layout.mdx file and pass custom props:

<Layout  navigation={true}  fluid={false}  sidebarClassName="custom-sidebar-class"  contentNavigation={false}>  {props.children}</Layout>

Navigation mirrors the file system, so overrides only need to worry about layout props. The sections below outline how the menus and tables of contents are generated.