Files

layout.config.tsx

Shared Layout Options

What is This?

As Fumadocs uses Next.js Routing, different layouts may need to share the same information (e.g. site title).

This file stores the shared options for different layouts.

app/layout.config.tsx
import { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 
export const baseOptions: BaseLayoutProps = {
  nav: {
    title: 'My App',
  },
};

You can import it from other layouts, like docs layout for example:

app/docs/layout.tsx
import { source } from '@/lib/source';
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import type { ReactNode } from 'react';
import { baseOptions } from '@/app/layout.config';
 
export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout tree={source.pageTree} {...baseOptions}>
      {children}
    </DocsLayout>
  );
}
Edit on GitHub

Last updated on

On this page