Layouts

Use and customize layouts in Fumapress.

Overview

Layouts are page renderers. They decide how a content page is wrapped, how the page body is rendered, and which UI pieces like sidebar, table of contents, navbar, and footer are shown.

Fumapress uses the docs layout by default. Pick another layout when a page needs a different reading experience, or switch between layouts per page with your own renderer.

Docs Layout

The default layout, with sidebar and table of contents.

Notebook Layout

The docs layout with a navbar above the content.

Glass Layout

The docs layout with floating, translucent sidebar and header.

Spacious Layout

The docs layout with the page in an inset panel.

Home Layout

A navbar-only layout for landing and custom pages.

Shared Props

Define defaultLayoutProps to share props across Fumadocs layouts. These props are merged into layouts that inherit default props, such as docs, notebook, and home layouts:

press.config.tsx
import { defineConfig } from "fumapress";

export default defineConfig({
  // ...
  defaultLayoutProps: {
    nav: {
      title: "My Docs",
    },
    links: [
      {
        text: "GitHub",
        url: "https://github.com/acme/docs",
      },
    ],
  },
});

Switching Layouts

renderPage is just a function that returns JSX node. To switch between layouts for every page, create typed layout components and forward props to the one you want:

press.config.tsx
import { defineConfig } from "fumapress";
import { createDocsLayoutPage } from "fumapress/layouts/docs";
import { createNotebookLayoutPage } from "fumapress/layouts/notebook";

const DocsPage = createDocsLayoutPage<typeof config.$context>();
const NotebookPage = createNotebookLayoutPage<typeof config.$context>();

const config = defineConfig({
  // ...
  renderPage: (props) => {
    if (props.page.path.startsWith("reference/")) {
      return <NotebookPage {...props} />;
    }

    return <DocsPage {...props} />;
  },
});

export default config;

With multiple content sources, switch on page.type instead, see Content Collections.

File-based Layouts

File-based routes in src/pages use Waku's file-based routing model. Use _layout.tsx files to apply layouts on children routes.

Define & export layouts:

press.config.tsx
import { defineConfig } from "fumapress";
import { createHomeLayout } from "fumapress/layouts/home";

const config = defineConfig({
  // ...
});

export const HomeLayout = createHomeLayout<typeof config.$context>();

export default config;

To apply HomeLayout on all file-based routes under /:

src/pages/_layout.tsx
export { HomeLayout as default } from "../../press.config";

Last updated on

Sanity

Pull documents from Sanity CMS and render them with Fumapress.

Docs Layout

The default layout, with sidebar and table of contents.

On this page

OverviewShared PropsSwitching LayoutsFile-based Layouts
Sponsors
General TranslationGeneral TranslationFerry HealthFerry Healthassistant-uiassistant-uiInkeepInkeep