close
Rspress
  • English

      • NavTitle

      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.

      This component is part of the navbar. NavTitle renders the site Logo and title in the top-left corner of the navbar.

      Usage

      Use through custom theme. The component internally reads configuration from rspress.config.ts through useSite:

      rspress.config.ts
      import { defineConfig } from 'rspress/config';

export default defineConfig({
  title: 'My Site',
  logo: '/logo.png',
  // Or support dark/light mode:
  logo: {
    light: '/logo-light.png',
    dark: '/logo-dark.png',
  },
  logoText: 'My Site',
});

      Custom NavTitle

      You can customize NavTitle through the navTitle prop of the Layout component:

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

const Layout = () => <BasicLayout navTitle={<MyCustomNavTitle />} />;

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

      Or use beforeNavTitle and afterNavTitle props to insert custom content:

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

const Layout = () => (
  <BasicLayout
    beforeNavTitle={<div>Before</div>}
    afterNavTitle={<div>After</div>}
  />
);

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

      For more information about custom themes, see the Custom Theme documentation.

      Configuration

      • Type: string | { light: string; dark: string }

      Site Logo. Can be a single image path, or separate images for light/dark mode.

      logoText

      • Type: string

      Text displayed next to the Logo.

      title

      • Type: string

      Site title. Displayed when logo and logoText are not configured.

      i18n Support

      For multilingual sites, you can configure title in each locale:

      rspress.config.ts
      import { defineConfig } from 'rspress/config';

export default defineConfig({
  title: 'My Site',
  themeConfig: {
    locales: [
      {
        lang: 'en',
        title: 'My Site',
      },
      {
        lang: 'zh',
        title: '我的网站',
      },
    ],
  },
});

      The NavTitle component will automatically display the corresponding title based on the current language.