> 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.

# NavList


[Added in v2.0.22](https://github.com/web-infra-dev/rspress/releases/tag/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](https://rspress.rs/guide/basic/custom-theme.md):

```tsx title="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`](https://rspress.rs/api/config/config-theme.md#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.