Laravel Nova如何为DOCS添加非资源类链接子菜单？

根据不同技术栈，以下是几种常见的实现方式：

原生HTML/CSS场景 #

直接修改导航的HTML结构，定位到「All docs」所在的父菜单元素，添加包含纯链接的子菜单：

<!-- 示例原DOCS菜单结构 -->
<li class="docs-menu">
  <a href="/all-docs">All docs</a>
  <!-- 新增的纯链接子菜单 -->
  <ul class="submenu">
    <li><a href="你的目标链接地址">自定义子菜单名称</a></li>
  </ul>
</li>

如果需要子菜单的hover显示效果，添加基础CSS样式：

.docs-menu {
  position: relative;
}
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px 0;
  min-width: 160px;
}
.docs-menu:hover .submenu {
  display: block;
}
.submenu li {
  list-style: none;
}
.submenu a {
  display: block;
  padding: 6px 16px;
  text-decoration: none;
  color: #374151;
}
.submenu a:hover {
  background-color: #f3f4f6;
}

Docusaurus文档框架场景 #

修改项目根目录下的sidebars.js配置文件，找到「DOCS」和「All docs」对应的分类节点，通过type: 'link'配置纯链接子菜单：

module.exports = {
  docs: [
    {
      type: 'category',
      label: 'DOCS',
      items: [
        {
          type: 'category',
          label: 'All docs',
          items: [
            // 配置纯链接子菜单
            {
              type: 'link',
              label: '自定义子菜单',
              href: '你的目标链接地址',
            },
            // 可添加更多纯链接子项
          ],
        },
        // 其他DOCS分类或文档
      ],
    },
  ],
};

VuePress文档框架场景 #

修改.vuepress/config.js中的themeConfig.sidebar配置，在「All docs」的子节点中直接添加链接：

module.exports = {
  themeConfig: {
    sidebar: {
      '/docs/': [
        {
          title: 'DOCS',
          children: [
            {
              title: 'All docs',
              children: [
                // 格式：[链接地址, 子菜单名称]
                ['你的目标链接地址', '自定义子菜单'],
              ],
            },
            // 其他文档条目
          ],
        },
      ],
    },
  },
};

核心思路 #

无论使用哪种技术栈，核心逻辑都是：找到「All docs」对应的导航父节点，添加一个仅指向外部/内部链接的子节点，无需关联任何文档资源文件，直接指定目标链接即可。

内容的提问来源于stack exchange，提问作者Maksim Riabchenko