> For AI agents: the complete documentation index is available at https://rspress.rs/llms.txt, the full documentation bundle is available at https://rspress.rs/llms-full.txt.

# Layout

`Layout` is the core layout component of Rspress, serving as the layout container for the entire page. It provides rich slot props to extend the default theme layout without ejecting.

## Usage

Use the Layout component through [custom theme](https://rspress.rs/guide/basic/custom-theme.md):

```tsx title="theme/index.tsx"
import { Layout as BasicLayout } from '@rspress/core/theme-original';

const Layout = () => <BasicLayout beforeNavTitle={<div>some content</div>} />;

export { Layout };
export * from '@rspress/core/theme-original';
```

## Slot props

The `Layout` component provides a series of slot props for extending the default theme layout:

Click below to preview slot locations on the page.



```tsx title="theme/index.tsx"
import {
  Layout as BasicLayout,
  getCustomMDXComponent as basicGetCustomMDXComponent,
} from '@rspress/core/theme-original';

const Layout = () => (
  <BasicLayout
    /* Before homepage Hero section */
    beforeHero={<div>beforeHero</div>}
    /* After homepage Hero section */
    afterHero={<div>afterHero</div>}
    /* Before homepage Features section */
    beforeFeatures={<div>beforeFeatures</div>}
    /* After homepage Features section */
    afterFeatures={<div>afterFeatures</div>}
    /* Before doc page Footer section */
    beforeDocFooter={<div>beforeDocFooter</div>}
    /* After doc page Footer section */
    afterDocFooter={<div>afterDocFooter</div>}
    /* At the beginning of doc page */
    beforeDoc={<div>beforeDoc</div>}
    /* At the end of Doc page */
    afterDoc={<div>afterDoc</div>}
    /* Before document content */
    beforeDocContent={<div>beforeDocContent</div>}
    /* After document content */
    afterDocContent={<div>afterDocContent</div>}
    /* Before navbar */
    beforeNav={<div>beforeNav</div>}
    /* After navbar */
    afterNav={<div>afterNav</div>}
    /* Before nav title in top-left corner */
    beforeNavTitle={<span>😄</span>}
    /* Nav title */
    navTitle={<div>Custom Nav Title</div>}
    /* After nav title in top-left corner */
    afterNavTitle={<div>afterNavTitle</div>}
    /* Before nav menu */
    beforeNavMenu={<div>beforeNavMenu</div>}
    /* After nav menu */
    afterNavMenu={<div>afterNavMenu</div>}
    /* Above left sidebar */
    beforeSidebar={<div>beforeSidebar</div>}
    /* Below left sidebar */
    afterSidebar={<div>afterSidebar</div>}
    /* Above right outline */
    beforeOutline={<div>beforeOutline</div>}
    /* Below right outline */
    afterOutline={<div>afterOutline</div>}
    /* At the very top of the page */
    top={<div>top</div>}
    /* At the very bottom of the page */
    bottom={<div>bottom</div>}
    /* Custom MDX components */
    components={{
      h1: props => {
        const { h1: OriginalH1, p: OriginalP } = basicGetCustomMDXComponent();
        return (
          <>
            <OriginalH1 {...props} />
            <OriginalP>
              This is a custom paragraph added after every H1 heading.
            </OriginalP>
          </>
        );
      },
    }}
  />
);

export { Layout };
export * from '@rspress/core/theme-original';
```