Page should scroll to selected tab

[mhowes-veracode]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Description

Adding a query to a tab allows the user to add a selected tab to the URL, as explained here: https://docusaurus.io/docs/markdown-features/tabs#query-string

But, clicking that URL does not scroll down the page to the selected tab. This means the user must select the anchor for the containing header, to add that header to the URL, then select a tab, to add the selected tab to the URL, then the link does scroll. It's not intuitive to expect users to do this.

Has this been requested on Canny?

No response

Motivation

Improve UX around how users expect to link to a selected tab.

API design

No response

Have you tried building it?

No response

Self-service

• I'd be willing to contribute this feature to Docusaurus myself.

[slorber]

An url with a tab query string parameter is not supposed to scroll to the tab.

Please consider that a page might contain many tabs with the same option, and Docusaurus can't guess to which tab in the page you want to scroll to.

If you want to scroll and browse a specific tab, you have to use both an anchor and a querystring param.

Example: https://docusaurus.io/docs/markdown-features/tabs?current-os=ios#query-string

This is the intended behavior.

---

This means the user must select the anchor for the containing header, to add that header to the URL, then select a tab, to add the selected tab to the URL, then the link does scroll. It's not intuitive to expect users to do this.

IMHO this is not really an UX users would expect anyway, and is more likely to be used by site authors that understand how all this works. Those site authors must understand that they should be explicit and define precisely where the link should land in terms of heading/anchor + tabs being rendered, which is what we do.

If you see another doc site that has a more intuitive behavior than ours, please show us some examples and we'll take this into consideration.

Even the Stripe docs does not do that, despite using tabs extensively:
https://stripe.com/docs/payments/checkout/custom-domains?verify-with=web&nameserver-provider=cloudflare

Note we can have multiple tab params in the query-string, and it's impossible to guess to which tab we want to scroll to in this case, apart picking a random tab.

---

At best I'd be willing to consider adding a <Tabs id="my-id"/> prop (new feature)

We could add the anchor to the url when a tab gets selected.

This would resolve the ambiguity in case of multiple tabs using the same queryString param:

<Tabs queryString="current-os" id="tab-1">
  <TabItem value="android" label="Android">
    Android 1
  </TabItem>
  <TabItem value="ios" label="iOS">
    iOS 1
  </TabItem>
</Tabs>

<Tabs queryString="current-os" id="tab-2">
  <TabItem value="android" label="Android">
    Android 2
  </TabItem>
  <TabItem value="ios" label="iOS">
    iOS 2
  </TabItem>
</Tabs>

Let me know if that would be good enough to solve your problem.

[mhowes-veracode]

Hi @slorber , thanks for the detailed explanation! I think the id attribute is a great idea.

[rcarteraz]

Hi @slorber , thanks for the detailed explanation! I think the id attribute is a great idea.

@slorber I agree with this, I think it would be quite useful.