NavList

Warning

该组件主要配合自定义主题中的 wrap/eject 使用，与 MDX 里直接导入使用的组件不同，你可以通过传递组件 props 或直接覆盖该组件达到修改样式和功能的目的。如果通过 eject 覆盖整个组件，需注意组件对应配置项的读取会失效，需要自行控制。

新增于 v2.0.22

NavList 会根据布局当前的导航展示方式渲染自定义导航项，同一个组件同时适用于桌面端导航栏和展开后的移动端菜单。

用法

在自定义主题中，将 NavList 传入导航项插槽：

theme/index.tsx

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

const customItems = [
  { text: '社区', link: '/community' },
  {
    text: '资源',
    items: [{ text: '示例', link: '/examples' }],
  },
];

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

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

桌面端会将这些项渲染在导航栏中；在小屏幕上，同一组项会渲染到展开后的移动端菜单中，因此不需要分别实现桌面端和移动端布局。

Props

items

类型： NavItem[]

要渲染的导航项。数据结构与 themeConfig.nav 相同，支持 text、link 和嵌套的 items。

插入位置

将 NavList 传入 Layout 的四个导航项插槽之一：

beforeLeftNavItems
afterLeftNavItems
beforeRightNavItems
afterRightNavItems

插槽决定菜单显示在对应左侧或右侧导航项的前面或后面。

#NavList

#用法

#Props

#items

#插入位置

NavList

用法

Props

items

插入位置