Redoc如何添加层级标签并拓展左侧菜单栏至2级以上深度

1. 调整菜单深度配置 #

Redoc 2.0.0-rc.50及以上版本已原生支持自定义菜单显示深度，无需二次开发即可将默认2级深度调整到最多6级：

• 基础配置参数为 menuDepth，直接在Redoc初始化参数中修改数值即可，示例如下：

  <!-- HTML嵌入场景配置示例 -->
  <redoc spec-url="你的openapi规范地址" menu-depth="3"></redoc>
  

  // React组件场景配置示例
  import { RedocStandalone } from 'redoc';
  
  function App() {
    return <RedocStandalone specUrl="你的openapi规范地址" options={{menuDepth: 3}} />
  }
  

2. 层级标签配置 #

通过OpenAPI规范的扩展字段 x-tagGroups 即可实现多层级标签分类，配置示例如下：

openapi: 3.0.3
info:
  title: 业务API文档
  version: 2.0.0
# 一级分组配置
x-tagGroups:
  - name: 用户中心模块
    tags:
      - 账号管理
      - 权限管理
  - name: 订单模块
    tags:
      - 订单创建
      - 订单查询
# 二级标签配置
tags:
  - name: 账号管理
    description: 用户账号相关接口
  - name: 权限管理
    description: 用户权限相关接口
# 接口定义部分省略

配置完成后左侧菜单会自动生成「一级分组-二级标签-三级接口」的三层层级结构，符合新增1级深度的需求。

3. 超6级深度的自定义修改方案 #

如果需要超过6级的菜单深度，可自行修改Redoc源码实现：

• 拉取Redoc官方源码后，修改 src/components/SideMenu/Menu.tsx 中的递归渲染逻辑，移除默认的最大深度限制
• 修改完成后执行 npm run build 编译打包，使用自定义构建的Redoc文件即可

内容的提问来源于stack exchange，提问作者R.Srivastava