Skip to content

DocSidebarItemCategory doesn't expand upon active menu changes under it #11122

@qqq614

Description

@qqq614

Have you read the Contributing Guidelines on issues?

Prerequisites

Description

This may not be a bug but an improvement on the sidebar behavior. Currently DocSidebarItemCategory only expand itself when it changes from inactive to active using useAutoExpandActiveCategory function. However it maybe helpful to users if the category expand itself upon the active path changes while it is kept being active.

We have built a openapi documentation site using docusaurus-openapi-docs and we also have search enabled. Upon searching and clicking for menus that are already under the active category(if you see the video i posted), you can see that the category does not expand. While searching and clicking for menus that are not under active category, it expands.

2025-04-22.5.51.06.mov

So we swizzled the component DocSidebarItemCategory and changed the function as below. This would allow the category menu to expand itself not only when category just becomes active but also when active menu changes under this category while it being active.

function useAutoExpandActiveCategory({
  isActive,
  collapsed,
  updateCollapsed,
  activePath
}: {
  isActive: boolean;
  collapsed: boolean;
  updateCollapsed: (b: boolean) => void;
  activePath: string;
}) {
  const wasActive = usePrevious(isActive);
  const previousActivePath = usePrevious(activePath);
  useEffect(() => {
    const justBecameActive = isActive && !wasActive;
    const stillActiveButPathChanged = isActive && wasActive && activePath !== previousActivePath;
    if ((justBecameActive || stillActiveButPathChanged) && collapsed) {
      updateCollapsed(false);
    }
  }, [activePath, isActive, wasActive, collapsed, updateCollapsed]);
}

Although the user can swizzle the component, I think it makes sense to make it a default behavior. Not only when searching but if you see the demo below, you can see category does not expand when menu under the same category becomes active.

Reproducible demo

https://stackblitz.com/edit/github-c5awx2cm?file=docs%2Ftutorial-extras%2Ftest-category-expansion.md

Steps to reproduce

  1. https://stackblitz.com/edit/github-c5awx2cm?file=docs%2Ftutorial-extras%2Ftest-category-expansion.md
  2. go to Tutorial - Extras > Test Expansion
  3. Collapse Tutorial - Extras category
  4. click go to menu under same category
  5. see that Tutorial - Extras doesn't expand.

Expected behavior

Tutorial - Extras menu should expand when active menu changes under it.

Actual behavior

Tutorial - Extras menu doens't expand on active menu changes under it.

Your environment

Self-service

  • I'd be willing to fix this bug myself.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugAn error in the Docusaurus core causing instability or issues with its execution

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions