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, and this page is available as Markdown at https://rspress.rs/ui/layout-components/nav-list.md.
close
Rspress
  • English

      • NavList

      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.

      Added in v2.0.22

      NavList renders a list of custom navigation items using the layout's current navigation presentation. The same component works in the desktop navbar and the expanded mobile menu.

      Usage

      Use NavList with one of the navigation item slots in a custom theme:

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

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

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

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

      On desktop, the items are rendered in the navbar. On small screens, the same items are rendered in the expanded mobile menu, so the theme does not need separate desktop and mobile implementations.

      Props

      items

      • Type: NavItem[]

      Navigation items to render. The item shape is the same as themeConfig.nav, including text, link, and nested items.

      Placement

      Pass NavList to one of the four navigation item slots on Layout:

      • beforeLeftNavItems
      • afterLeftNavItems
      • beforeRightNavItems
      • afterRightNavItems

      The slot determines whether the list appears before or after the corresponding left or right navigation items.