Make sidebar collapsible on clicking label not just arrows

[aaryanporwal]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

In the sidebar, is there any way to make the accordions collapsible on clicking label? It's possible to expand the accordion on first click, but on clicking an expanded accordion should collapse it. Currently, the user has to click on the accordion arrow to collapse it.

In the following video, I've attached the docusaurus docs page where the bug can be seen. I'm not sure if this is an intended thing, but seems odd UX-wise.

Screen.Recording.2025-01-21.at.2.22.15.PM.mov

Reproducible demo

No response

Steps to reproduce

1.	Open the Docusaurus docs page in a browser.
2.	Navigate to the sidebar containing accordions.
3.	Click on the label of an accordion to expand it.
4.	Click on the same accordion label again to attempt to collapse it.

Expected behavior

Clicking on an expanded accordion’s label should collapse it, providing a toggle behavior directly through the label.

Actual behavior

Clicking on the label of an expanded accordion does not collapse it. The user must click on the accordion arrow to collapse it, which results in inconsistent user experience.

Your environment

• Public site URL: https://docusaurus.io/docs/category/guides

Self-service

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

[slorber]

This is a design decision we made in the past, but I agree that it could be convenient to collapse on label click, and many other docs frameworks have implemented it that way.

If the community thinks it's a better default behavior, I'm happy to revisit our past design decision.

Please vote here with 👍 or 👎

[MaxLenormand]

I understand this might be a design on which different people have different opinions. Would it be possible to make this a toggle / option?

[slorber]

Would it be possible to make this a toggle / option?

If we provide an option for each possible UI micro-interaction, we end up with a cluttered config file, which is already quite large. I don't think it's a good idea to introduce such option.

---

There's something I don't like in the proposal:

Category
-> Doc

If we are on Doc, and click on category, it doesn't necessarily mean we want to "collapse" it.
Sometimes we want to navigate to the category's page while keeping it expanded.

An example of this unwanted behavior can be seen here: https://nextra.site/docs/docs-theme/built-ins/layout

Click on the "Docs Themes" category: collapsing the full tree is confusing and not necessarily what I want.

---

IMHO the best middle-ground option is to:

• not collapse the category if we navigate from another page
• collapse the category only if we are already on the category's page (not navigating)

Here's an example docs implementing this pattern: https://fumadocs.vercel.app/docs/ui/openapi/proxy

Click on the parent "OpenAPI" expanded category label:

• on 1st click, it doesn't collapse. We come from another page and we simply navigate to the category.
• on 2nd click, we are on the category's page already, and we collapse it

Edge case: if a category has no "page" (generated index or custom markdown file), then we can always collapse it on click.

Does it make sense?

[MaxLenormand]

Thanks for the thorough & details answer!

I hadn't considered your point about wanting to sometimes wanting to see the main category rather than collapse. I like your suggestion!

[slorber]

I tried to implement this behavior in #10886

Can you please help me review it and tell me if it works as you expect?

https://deploy-preview-10886--docusaurus-2.netlify.app/

[lebalz]

Is it already optimized for mobile? Or is it by design to always hide the sidebar on clicking a category?

Screen_Recording_20250131_221643_Chrome.mp4

[aaryanporwal]

I tried to implement this behavior in #10886

Can you please help me review it and tell me if it works as you expect?

https://deploy-preview-10886--docusaurus-2.netlify.app/

Thanks for the fix, LGTM

[aaryanporwal]

Is it already optimized for mobile? Or is it by design to always hide the sidebar on clicking a category?

Screen_Recording_20250131_221643_Chrome.mp4

This is unrelated to this issue @lebalz. I see the same behavior on docusaurus.com/docs as well, I would assume its a design decision :)

[slorber]

Is it already optimized for mobile? Or is it by design to always hide the sidebar on clicking a category?

Screen_Recording_20250131_221643_Chrome.mp4

This has always been like that, not a new behavior.

I think navigating the category/doc without auto-closing the sidebar would be even weirder and less convenient considering you'd have to close the sidebar manually.

If you want to navigate and keep the sidebar open, you can still press the category arrows instead.

If you have any idea for a better alternative, we can revisit this UX, but as a separate PR.