Layout

Warning

This component is mainly used in conjunction with wrap/eject in Custom Theme , and is different from components that are directly imported in MDX. You can modify the styles and functions by passing component props or directly overriding the component. If you override the entire component through eject, please note that the reading of the corresponding configuration options of the component will become invalid and you need to control it yourself.

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:

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.

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>}
    /* Before/after the left navigation items (desktop and mobile) */
    beforeLeftNavItems={<li>beforeLeftNavItems</li>}
    afterLeftNavItems={<li>afterLeftNavItems</li>}
    /* Before/after the right navigation items (desktop and mobile) */
    beforeRightNavItems={<li>beforeRightNavItems</li>}
    afterRightNavItems={<li>afterRightNavItems</li>}
    /* 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';

Added in v2.0.22

Use beforeLeftNavItems / afterLeftNavItems and beforeRightNavItems / afterRightNavItems to insert items before or after the left and right navigation lists. NavList automatically adapts to desktop and mobile.

theme/index.tsx

import { Layout as BasicLayout, NavList } from '@rspress/core/theme-original';

const customItems = [{ text: 'Community', link: '/community' }];

export function Layout() {
  return <BasicLayout afterRightNavItems={<NavList items={customItems} />} />;
}

export * from '@rspress/core/theme-original';

items uses the same structure as themeConfig.nav; placement is determined by the slot.

#Layout

#Usage

#Slot props

#Custom navigation lists

Layout

Usage

Slot props

Custom navigation lists