Support activeBasePath and activeBaseRegex for Navbar dropdowns

🚀 Feature

Allow setting of activeBasePath and activeBaseRegex on dropdown items for the navbar so the dropdown becomes highlighted when the user is in that particular section of the docs.

Motivation

activeBasePath and activeBaseRegex are very useful for signalling to the user what section of the docs they are on.

However, this doesn’t work for dropdowns. This reduces the immediate helpfulness when moving from a flat navbar structure to a slightly more nested one. See example:

Before:

After:

Have you read the Contributing Guidelines on issues?

Yes

Pitch

If we implemented this feature, then the user will have a clear signal as to what section of the docs they are on, regardless of whether or not they were hovering over a specific dropdown. Of course, you can simply opt-out of this feature by not using activeBasePath and activeBaseRegex in the dropdown.

Example usage:

{
  label: "The Protocol",
  position: "left",
  activeBaseRegex: "(synthetic-tokens|oracle/|governance/)",
  items: [
    {
      to: "synthetic-tokens/explainer",
      label: "Synthetic Tokens",
      activeBasePath: "synthetic-tokens",
    },
    {
      to: "oracle/tech-architecture",
      label: "Oracle (DVM)",
      activeBaseRegex: "(oracle/|governance/)",
    },
  ],
},

[adrianmcli]

@slorber thanks so much for the clarification! perhaps it should be documented better, but I really appreciate you taking the time 😊

[slorber]

np 👍

i’d like to improve all that as it’s not idiomatic at all

keeping this undocumented also helps to see how many users are struggling with this kind of issues 😃