Navbar#

The navbar is very important to a website. It allows users to quickly jump between different pages of the website, and also allows users to quickly find some important information of the website.

Custom navigation menu#

You can add a custom navigation menu in themeConfig.nav, configured as an array, as follows:

import { defineConfig } from 'rspress/config';

export default defineConfig({
  themeConfig: {
    nav: [],
  },
});

The nav bar is configured as an array, and each item in the array is a NavItem object, which has the following types:

export type NavItem = NavItemWithLink | NavItemWithChildren;

That is, each navbar element ( NavItem ) can be a link ( NavItemWithLink ), or a navbar group containing child elements ( NavItemWithChildren ).

NavItemWithLink#

export interface NavItemWithLink {
  text: string;
  link: string;
  activeMatch?: string;
  position?: 'left' | 'right';
}

The meanings of the attributes are as follows:

• text - Navbar text
• link - Navbar link
• activeMatch - Activation rule for navbar links
• position - Navbar menu item position

Attribute details:

activeMatch is used to match the current route, when the route matches the activeMatch rule, the nav item will be highlighted.

By default, activeMatch is the link attribute of NavItem.

position is used to configure independent positioning of top menu items, with the following options available:

• left placed in the left menu bar at the top of the menu item;
• right placed in the right menu bar at the top of the menu item.

If the position is not configured, it will be placed on the right menu bar by default, which is equivalent to configuring right .

NavItemWithChildren#

export interface NavItemWithChildren {
  text: string;
  items: NavItem[];
  position?: 'left' | 'right';
}

The meanings of the attributes are as follows:

• text - Navbar text
• items - Sub navbar elements
• position - Navbar menu item position with child navbar elements

Example#

import { defineConfig } from 'rspress/config';

export default defineConfig({
  themeConfig: {
    nav: [
      {
        text: 'Home',
        link: '/',
        position: 'left',
      },
      {
        text: 'Links',
        items: [
          {
            text: 'GitHub',
            link: 'http://github.com/',
          },
          {
            text: 'X',
            link: 'http://x.com/',
          },
        ],
        position: 'left',
      },
    ],
  },
});

Light/Dark Mode#

By default, the navbar will have a toggle button for Light/Dark mode, you can disable it with the following config:

import { defineConfig } from 'rspress/config';

export default defineConfig({
  themeConfig: {
    darkMode: false,
  },
});

Related links#

Social Links to the Site. For example:

import { defineConfig } from 'rspress/config';

export default defineConfig({
  themeConfig: {
    socialLinks: [
      {
        icon: 'github',
        mode: 'link',
        content: 'https://github.com/web-infra-dev/modern.js',
      },
    ],
  },
});

For more configurations, please refer to links.