Tabs Id for creating nested tab

[itsfaqih]

I don't know if it's possible with the current Tabs, but I have a case where the outer tabs' trigger is inside the inner tabs. So, I think this can be solved by adding an identifier to Root, List, and Content, like below

<Tabs.Root id="outer">
    <Tabs.Root id="inner">
        <Tabs.List id="inner">
            <Tabs.Trigger />
        </Tabs.List>
        <Tabs.Content id="inner">
            <Tabs.List id="outer">
                <Tabs.Trigger />
            </Tabs.List>
        </Tabs.Content>
    <Tabs.Root id="inner">
    <Tabs.Content id="outer" />
</Tabs.Root>

[benoitgrelard]

Hey @itsfaqih nesting tabs should already work by default.
Here's a quick example:

https://codesandbox.io/s/nested-tabs-of07xf?file=/App.js

[itsfaqih]

Thanks for responding, but I think the example doesn't match the case above.
I want to have the outer tabs trigger inside the inner tabs' content, is that possible?

[benoitgrelard]

I'm not sure I follow what you mean by:

I want to have the outer tabs trigger inside the inner tabs' content

What is the use case? That doesn't seem right.
Regardless, you can always control the open tab using value and onValueChange.