Tabs + Subtabs navigation



I know its almost a trending topic but there’s no place where I could find a solution that works like I need it does.

I started from the tabs example. Then I add an abstract state that his only functionality is to add another tabs (subtabs) to the initial tabs. Then, in each of these subtabs I’ll have different views. I need them to have their own navigation and “scroll management”, I mean, the scroll and the navigation should be independent between those views, if I make a scroll in first view, the scroll point in the second view should be at the top.

So I achieve to have the structure but then I have problems with the navigation between the tabs. Check this codepen:

You’ll figured out that the subtabs works “fine” but if, starting from “dash”, I goes to any element in dash, then when I’m changing between tabs I click in “Account” you will see that different things happen depending on I don’t know what:

  • Sometimes, when you click in dash again, it turns back to the dash view (it is an error, I’ll expect it to turn back to the tab I was before
  • Sometimes it turns back to the tab 1 (its an error, because always goes to the same tab, I mean, starting from subtab 1 or subtab2 it always return to subtab1). Also in this step the “back” button doesn’t appear so I’m stuck in that view.

I’ll appreciate some help here please.

Thank you very much in advance. If you need more info or I don’t explained the things clever enough don’t hesitate in contact me.