如何点击特定选项后隐藏Docusaurus导航栏中的下拉菜单

云上老周

2026-7-27

实现Docusaurus导航栏下拉菜单的条件隐藏

可以实现点击Metallic选项后隐藏导航栏中的下拉菜单，核心思路是通过路由或侧边栏状态检测动态控制组件渲染，具体步骤如下：

步骤1：创建自定义下拉菜单组件

在项目的src/theme/NavbarItem/目录下新建DropdownNavbarItem.js文件（目录不存在则手动创建），编写自定义组件替换默认的下拉菜单：

import React from 'react';
import { useLocation } from '@docusaurus/router';
import DropdownNavbarItem from '@theme-original/NavbarItem/DropdownNavbarItem';

export default function CustomDropdownNavbarItem(props) {
  const location = useLocation();
  // 匹配Metallic侧边栏页面的路由，根据实际文档路径调整规则
  const isMetallicPage = location.pathname.includes('/metallic/');

  // 若当前是Metallic页面，不渲染下拉菜单
  if (isMetallicPage) {
    return null;
  }

  // 其他页面正常渲染原下拉菜单
  return <DropdownNavbarItem {...props} />;
}

步骤2：适配侧边栏ID匹配规则

如果你的Metallic文档路由不包含/metallic/，可以直接通过侧边栏ID判断，修改组件代码为：

import React from 'react';
import { useDocsSidebar } from '@docusaurus/theme-common/internal';
import DropdownNavbarItem from '@theme-original/NavbarItem/DropdownNavbarItem';

export default function CustomDropdownNavbarItem(props) {
  const sidebar = useDocsSidebar();
  // 判断当前页面所属的侧边栏ID是否为Metallic
  const isMetallicPage = sidebar?.id === 'Metallic';

  if (isMetallicPage) {
    return null;
  }

  return <DropdownNavbarItem {...props} />;
}