How to pass the versions from navbar dropdown

[ghost]

I have been trying to configure my navbar dropdown to route to different docs on the same version, but it keeps jumping me to the newest version everytime I click on a different section.

{
  label: "Extend",
  to: "extend/",
  position: "left",
  items: [
    {
      label: 'A',
      to: 'getting-started/overview'
    },            {
      label: 'B',
      to: 'getting-started/doc2'
    },            {
      label: 'C',
      to: 'getting-started/doc3'
    },
  ]
},

@slorber @lex111 can you please help me!

[slorber]

Hi,

The default navbar dropdown does not do anything "clever", it just links to a static URL path.

If you want it to link to an older version, you'd have to write old-version/getting-started/overview instead

For now, we don't have a way to make the dropdown link to different versions, and it's unlikely we'll add this as-is: the older/newer versions may not contain exactly the same documents, so Docusaurus should be able to handle these edge-case scenarios.

I mean if you link to "myDoc", and "/newVersion/myDoc" exists, but not "/oldVersion/myDoc". It would be odd if Docusaurus shows "myDoc" but it leads to a 404 page.

What we'd like to explore is some kind of dynamic navbar where some navbar items can be activated according to specific conditions, take a look at #4389 (comment)

[ghost]

Can you please guide me, how this can be achieved.

I mean to achieve something like this:

items: [
  {
    label: 'A',
    to: `${VERSION_NUMBER}` + `/introductions/abc'
  }
]

How to get the current version and import in docusaurus.config.js. I tried importing the current version in the similar way, how it's done in the DocItem Component and the current doc version is shown in Version Label. But it didn't work!

In DocItem Component:

import { useActivePlugin, useVersions, useActiveVersion } from '@theme/hooks/useDocs';
function DocItem(props){
    const version = useActiveVersion(pluginId);
}

The version there is a state and thus was used, but how to achieve this in docusaurus.config.js. Kindly please help 🙏

[ghost]

@slorber I have the same dropdown in all versions. So won't have the option when a doc is present in an version, but not in a newer/older one. I need to achieve this stated above, just need some help!

[slorber]

That's what I try to explain you: the dropdown is just a list of static links currently and what you want is not currently possible, and the issue I linked to is a proposal to a possible solution to this problem, so subscribe to this issue and give feedback to it or open another feature request if you feel my proposal wouldn't solve your problem.

Even if your docs are present in all versions, it does not mean that we wouldn't have to think to about users for which it wouldn't be the case: we want to solve a problem in a generic way so that it works for multiple usecases, not just your specific usecase.

In the short-term, the only workaround I can think of is to swizzle NavbarItem/DefaultNavbarItem and implement the logic you want by yourself

[ghost]

@slorber thanks swizzling worked, also when do you guys actually plan to release the next docusaurus version 2.0.0-alpha.73. An estimate date would also work!

[slorber]

probably next week

[lkrell]

@heatherStanton I hope you don't mind, but trying to do the same for a doc site. Can you share how you got the swizzle to work?

[idontknowjs]

@lkrell This is a prototype of the website if you are willing to check the functionality of a multi-versioned website with Navbar dropdown together: https://zowe-docs.netlify.app/

You will need to follow these steps:
npm run swizzle <your_theme_name> NavbarItem --danger which will create a NavbarItem folder in src/theme

Particulary only these two files (DefaultNavbarItem.js, DocsVersionDropdownNavbarItem.js) need to be edited, other files can be deleted too.

You can have a look at the repo, specially at those two files. I've added //Added comment at the end of the lines which were modified/added for this functionality. You probably might need to do the same!

Let me know if you need any help, I would be happy to help

[lkrell]

Taking a look and giving it a try. Thank you so very much, this is a lifesaver!

[lkrell]

Your example is amazing for the versioned links in drop-downs. I can't thank you enough! ❤️ 🚀 The next step to tackle is also multi-instance links, though multi-instance has some weird issues so not using it. Also using this to learn more custom coding. I appreciate it.

[idontknowjs]

Glad it helped, all the best for your learning!