Navbar dropdown base items don't support ActiveBasePath and ActiveBaseRegex

jwitz commented 2 years ago

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

Create a navbar item with type: dropdown
Add some dropdown items to the base item
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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

Josh-Cena commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

Josh-Cena commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@slorber Desired behavior was achieved by setting activeClassName: 'navbar__link--active' as Joshua mentioned:

Screen Shot 2021-11-16 at 5 55 51 PM

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

activeClassName: 'navbar__link--active'

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

zWarMob commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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

facebook / docusaurus