侧边栏链接

概述

侧边栏

侧边栏项从传递给 <DocsLayout /> 的页面树中渲染。

对于 source.pageTree，它会从您的文件结构生成树，请参阅 available patterns。

layout.tsx

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      tree={source.pageTree}
      // other props
    >
      {children}
    </DocsLayout>
  );
}

您也可以硬编码它：

layout.tsx

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      tree={{
        name: 'docs',
        children: [],
      }}
      // other props
    >
      {children}
    </DocsLayout>
  );
}

侧边栏选项卡是具有类似选项卡行为的文件夹，只有打开的选项卡内容才可见。

侧边栏选项卡

默认情况下，选项卡触发器将显示为下拉组件（除非其项之一处于活动状态，否则隐藏）。

您可以通过将文件夹标记为根文件夹来添加项，在文件夹中创建 meta.json 文件：

content/docs/my-folder/meta.json

{
  "title": "文件夹名称",
  "description": "根文件夹的描述（可选）",
  "root": true
}

或者显式指定它们：

/app/docs/layout.tsx

import { DocsLayout } from 'fumadocs-ui/layouts/docs';

<DocsLayout
  sidebar={{
    tabs: [
      {
        title: '组件',
        description: 'Hello World!',
        // 对于 `/docs/components` 及其子路由（如 `/docs/components/button`）激活
        url: '/docs/components',

        // 可选地，您可以指定一组激活项的 URL
        // urls: new Set(['/docs/test', '/docs/components']),
      },
    ],
  }}
/>;

将其设置为 false 以禁用：

import { DocsLayout } from 'fumadocs-ui/layouts/docs';

<DocsLayout sidebar={{ tabs: false }} />;

想要进一步自定义吗？

您可以为 Docs 布局组件指定一个 banner。

import { DocsLayout, type DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
import type { ReactNode } from 'react';
import { baseOptions } from '@/lib/layout.shared';
import { source } from '@/lib/source';

const docsOptions: DocsLayoutProps = {
  ...baseOptions(),
  tree: source.pageTree,
  sidebar: {
    banner: <div>Hello World</div>,
  },
};

export default function Layout({ children }: { children: ReactNode }) {
  return <DocsLayout {...docsOptions}>{children}</DocsLayout>;
}

装饰

更改选项卡的图标/样式。

import { DocsLayout } from 'fumadocs-ui/layouts/docs';

<DocsLayout
  sidebar={{
    tabs: {
      transform: (option, node) => ({
        ...option,
        icon: <MyIcon />,
      }),
    },
  }}
/>;

概述

侧边栏选项卡 (下拉菜单)

装饰

On this page