Ability to have a direct link to a TabItem

[stavros-k]

What version of starlight are you using?

0.29.2

What is your idea?

The ability for each tab item to have an id so you can create direct links to them.
So when a user hits a link with #tab-item-X the X tab will be automatically selected.

Why is this feature necessary?

Imagine you have some docs that list different instructions for each Operating system.
Now you have each of them in a TabItem. And inside each TabItem, you want to include a link to another page which also has OS specific details.

It would be nice to be able to have a direct link to a specific tab on another page.
Now when the user is directed on that page,

1. Will see the tab that actually needs.
2. All other tabs will sync on this page, (assuming you have a syncKey) set.

Do you have examples of this feature in other projects?

No response

Participation

• I am willing to submit a pull request for this feature.

[delucis]

Thanks for the feature request @stavros-k! I'll be interested to hear feedback and see if this is something other users would like to see.

you want to include a link to another page which also has OS specific details.

It would be nice to be able to have a direct link to a specific tab on another page.

I think currently what I would do is link to a heading above the tabs. If you have syncKey on both sets of tabs, the user's choice from the previous page would also apply on the new page, so the experience would be pretty much the same.

So the target page might look like:

## Installation

<Tabs syncKey="os">
  ...
</Tabs>

And your content could just link to #installation on that page assuming its tabs also use os key.

[leaanthony]

I'm very interested in this feature. Technically, it shouldn't be about tab items, just a way to be able to create anchor points in the docs. Appreciate you considering this option.

[delucis]

Headings automatically get an anchor link (e.g. #example-heading for a Markdown heading like ## Example heading) and you can always add custom IDs to things in your content if needed.

For example, if you wanted to link to a specific paragraph you can add an id to it explicitly:

<p id="anchor">
  Some content you want to link to
</p>

Then links to #anchor on that page would point there.