Navbar dropdown base items don't support ActiveBasePath and ActiveBaseRegex

[jwitz]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

• [X] I'm using the latest version of Docusaurus.
• [X] I have tried the npm run clear or yarn clear command.
• [X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [X] I have tried creating a repro with https://new.docusaurus.io.
• [X] 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

1. Create a navbar item with type: dropdown
2. Add some dropdown items to the base item
3. Give the base navbar item to and activeBasePath/activeBaseRegex values 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.

[Josh-Cena]

Dropdowns are never highlighted and it's weird to even expect that they are. Doc PRs are welcome, but I don't think anyone has interpreted it that way anyways ㄟ(▔,▔)ㄏ By "any of the props of a plain navbar link" I was mostly highlighting on things like href, aria-role, etc.

[jwitz]

@Josh-Cena I am building a navbar dropdown which represents an entire product, and each dropdown item is a different version/ component of that product. When browsing a doc for one of those subcomponents, it would make sense to have both the subcomponent in the dropdown and the top-level product navbar highlighted as active paths. Don't think that's very weird to expect?

[Josh-Cena]

I'm not sure if they should—in most instances this would be less desired than it is. We deliberately made dropdowns non-highlighted because things like version dropdowns, etc. would be weird to be highlighted. I will spend a while thinking of a right plan for this.

[jwitz]

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.

[jwitz]

And because ABP/ ABR are optional values, nobody would have to interact with this behavior if they didn't want to

[Josh-Cena]

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.

[Josh-Cena]

And because ABP/ ABR are optional values, nobody would have to interact with this behavior if they didn't want to

ABP is inferred to be the target, so all dropdowns with a link associated would be unnecessarily highlighted.

[jwitz]

Oh wow, brilliant workaround @Josh-Cena ! That works exactly as intended!

[Josh-Cena]

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

[slorber]

It's hard for me to understand the desired UX, is it possible to have a screenshot/mockup or something showing what you are building in a more concrete way?

[jwitz]

@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]

There is no trace of "activeClassName" in the docs 😅 Can this possibly be documented?

I needed highlighted dropdowns as well so I Googled 'docusaurus dropdown active' to find this github issue

[Josh-Cena]

@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 activeClassName is part of react router's NavLink props.

[Cindy0622]

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.

add to where ?

[Cindy0622]

activeClassName: 'navbar__link--active'

could you please give me a example, thank you so much

[zWarMob]

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.

add to where ?

in docusaurus.config.js you should have your navbar items inside the array "items" There you have your dropdown f.ex.:

          {
            type: "dropdown",
            activeClassName: "navbar__link--active",
            to: "docs/d1-entityframework",
            position: "left",
            label: "Entity Framework",
            items: [
              {
                to: "docs/d1-entityframework/documentation/getting_started",
                label: "Getting Started",
              },

so yh. Add your activeClassItem as a property to your item (of type dropdown)

[jwitz]

@Cindy0622 You can see how we do this in the Software dropdown menu of our Docusaurus config file: https://github.com/astronomer/docs/blob/main/docusaurus.config.js

[Cindy0622]

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.

add to where ?

in docusaurus.config.js you should have your navbar items inside the array "items" There you have your dropdown f.ex.:

          {
            type: "dropdown",
            activeClassName: "navbar__link--active",
            to: "docs/d1-entityframework",
            position: "left",
            label: "Entity Framework",
            items: [
              {
                to: "docs/d1-entityframework/documentation/getting_started",
                label: "Getting Started",
              },

so yh. Add your activeClassItem as a property to your item (of type dropdown)

we are using 2.0.0-rc.1, and we do like what you say, but it didn't work

[Cindy0622]

@Cindy0622 You can see how we do this in the Software dropdown menu of our Docusaurus config file: https://github.com/astronomer/docs/blob/main/docusaurus.config.js

we are using 2.0.0-rc.1, and we do like what you say, but it didn't work

[jwitz]

@Cindy0622 Are you getting errors? Or is it just not highlighting as expected? You might have to fine-tune the behavior of the sidebar using ActiveBasePath/ ActiveBaseRegex, took me a while to get mine right. Besides that, I'm not sure what the problem would be.