Allow setting label for Versions Dropdown

🐛 Bug Report

Prerequisites

• I’m using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and 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

(A clear and concise description of what the bug is.)

Have you read the Contributing Guidelines on issues?

Yup

Steps to reproduce

Use https://new.docusaurus.io to create a CodeSandbox reproducible demo of the bug.

Versioning crashes CodeSandbox right now. Please use the example repo.

(Write your steps here:)

1. Create a project with multi-instance docs. Each set of documentation must be versioned. Documentation is available here.
2. Add a docsVersionDropdown navbar item for each set of docs as shown here
3. Resize window to collapse navbar to sidebar

Expected behavior

I expected the current version label to be moved to the sidebar. (Write what you thought would happen.)

Actual behavior

The word ‘Version’ replaces the label for the current (or any) version. In projects with multiple docs this creates a really confusing user experience for anyone using the site on mobile.

It turns out this value is hard coded in the classic theme.

It would be great if I could override that label.

Your environment

• Public source code: N/A
• Public site URL: N/A
• Docusaurus version used: 2.0.0-beta 4
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Chrome Version 92.0.4515.131, Node.js v15.5.1
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): MacOSX BigSur 11.4

Reproducible demo

https://github.com/freef/docusaurus-error-example

[freef]

Hmmm… I think that the simplest solution would be to add a field called something like mobileLabel to the docsVersionDropdown with a default value of Version. Then change the line in the screenshot to

const dropdownLabel = mobile && items ? dropdownVersion.mobileLabel : dropdownVersion.label;

[slorber]

@andrewnicols if would help if you could share what’s the target experience you aim for instead of what’s not working at the moment. Do you know existing sites implementing exactly the UX you want?

The version dropdown shows the current version, but if you click on it (without waiting for it to open the dropdown) it takes you to the landing page for that doc

That doesn’t seem like a bad default behavior and is consistent with all the other dropdowns we have.

Having it display the current version is not always intuitive

In which case? Who reported what problem exactly?

it is not relevant for non-versioned docs.

If your docs is unversioned, why would you use this version dropdown anyway 🤷‍♂️ you shouldn’t use it.

I wonder whether the proposal that @slorber mentions to have it in the sidebar would resolve these issues and make it clearer, but I’m hesitant to swizzle this when it feels like it should be a core feature.

The core feature of Docusaurus is to be flexible and to allow you to bend it to your custom needs

If the version dropdown item doesn’t work for you, it’s possible to add your own custom navbar items: https://github.com/facebook/docusaurus/issues/7227

We could make it a select instead (ie the navbar element is a button instead of a link) but that would be a different navbar item type with a different ux and configuration, and things to take care of like accessibility.

Some users already do this: https://docs.dyte.io/react-native (open-source site)