docusaurus: Navbar dropdown base items don't support ActiveBasePath and ActiveBaseRegex
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 clearoryarn clearcommand. - I have tried
rm -rf node_modules yarn.lock package-lock.jsonand 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
According to the Docusaurus documentation: the dropdown base item is a clickable link as well, so this item can receive any of the props of a plain navbar link.
However, this is not the case: activeBaseRegex and activeBasePath have no effect on a dropdown base item. I recreated this issue in the following sample project: https://stackblitz.com/edit/github-huqpv7-kzdx99?file=docusaurus.config.js
As you can see, the ABP works item highlights when viewing a doc in the tutorial-basics directory, while the ABP doesn't work item doesn’t.
Steps to reproduce
- Create a navbar item with
type: dropdown - Add some dropdown items to the base item
- Give the base navbar item
toandactiveBasePath/activeBaseRegexvalues that are expected to work
Expected behavior
The base navbar item for the dropdown should remain highlighted when accessing any links covered by the activeBasePath/activeBaseRegex value.
Actual behavior
The base navbar item for the dropdown does not remain highlighteed.
Your environment
- Public source code: https://stackblitz.com/edit/github-huqpv7-kzdx99?file=package.json
- Public site URL: https://github-huqpv7-kzdx99--3000.local.webcontainer.io
- Docusaurus version used: 2.0.0-beta8 for the above environment. I’ve recreated this issue on 2.0.0-beta9 as well but can’t get Stackblitz to successfully upgrade to it for this report.
- Environment name and version (e.g. Chrome 89, Node.js 16.4): Version 1.31.88 Chromium: 95.0.4638.69 (Official Build) (x86_64)
- Operating system and version (e.g. Ubuntu 20.04.2 LTS): MacOS 11.5.2
Reproducible demo
https://stackblitz.com/edit/github-huqpv7-kzdx99?file=docusaurus.config.js
Self-service
- I’d be willing to fix this bug myself.
About this issue
- Original URL
- State: open
- Created 3 years ago
- Comments: 20 (7 by maintainers)
Actually @jwitz forgive me for dismissing it as “weird” but it is indeed working as intended because more often than not dropdowns are not meant to be highlighted. As a workaround (and I think it’s a good one) you can add
activeClassName: 'navbar__link--active',to the dropdown item.@slorber Desired behavior was achieved by setting
activeClassName: 'navbar__link--active'as Joshua mentioned:The “Enterprise” tab highlights blue on its own when browsing a file in its given sidebar, and your specific dropdown version is simultaneously highlighted.
@zWarMob It’s not in the docs because it’s not a public API, only a workaround. It only works because we accept any kind of link props in navbar item config, and
activeClassNameis part of react router’sNavLinkprops.It’s not the most correct workaround because the active class name is different on mobile, so there is still something we can do on our side. I don’t have a good API on top of my head, but I’m going to keep it open and properly address it
Let me be more specific with my use case in case that helps:
We host two separate product documentation sets on our docs site: One for a versioned product and one for an un-versioned product. Currently, we cannot modify the Docusaurus version dropdown to appear only for the versioned docset/sidebar/etc, so instead we’ve created a dropdown of versioned docs to store in a standard dropdown menu. This way, you only need to interact with versions once, and they’re hidden in a dropdown all other times.
So for this use case, we’d like the version and the product to be highlighted so that users know when they are not browsing the unversioned product’s documentation - otherwise, nothing is highlighted on the navbar unless you hover into the dropdown. I can imagine use cases for Enterprise organizations that host docsets for different products on the same site - as your product offering gets more complex, you need to help users understand what version/ part of the product they’re viewing.