Tabs, section names and TOC?

[ilg-ul]

I have a page with a Tabs component, and each tab has some section titles. In TOC I get three identical lists, with no way to differentiate them.

I tried to adjust the section names, to include the tab name, like this:

## Automated install ({ props.label })

This works well for the page, but the expression is not evaluated in the TOC:

My current workaround was to disable TOC for the page, but this is not exactly a good solution, I already got a question during site review asking for the TOC.

As another workaround I'm considering splitting the single top Tabs into multiple shorter Tabs where the actual differences are, and thus avoid having section names inside Tabs. However I think that the page might not look very nice with a lot of Tabs.

Is there a better way to accommodate tabs, section names and TOC?

[slorber]

Headings are currently extracted/stringified at built time and do not support JSX expressions, evaluated at runtime.

We might explore the ability to handle that in the future, but this requires a full refactor of how we handle tocs.

Although not 100% related (here it's related to Markdown partials), this is being mentioned in #9772

[ilg-ul]

Thank you for explaining it. On short term it looks like having headings inside Tabs is not realistic.

Apart from disabling TOC or splitting the large Tabs into multiple small Tabs, do you see any other workaround?

[slorber]

You can "export const toc = []" in MDX to define your own explicit list of TOC iteme