Multiple tabstrip sets in app

[Adrian]

I am trying to figure out a way to use multiple tabstrip sets with what will be a large app.  The idea is to drill down into sub-tabstrips from a main tabstrip (the equivalent of a Menu or TreeView for web).  I want the tabstrip to change based on where the user is at (has a home button in all cases).  An example outline:

- Home (this tabstrip set) 
- Calendar
   - Page 1
   - Page 2
   - Page 3
- Customers
- Settings (different sets of lookup tables)
   - Home
   - Settings (this tabstrip set)
   - Profile
   - Users

I want to know if:
1) Is this a good idea for larger mobile apps?
If not, what should I be doing?  Could I mix in the web PanelBar, or would that not work well?

2) If this is proper for mobile apps, could someone look at these three jsfiddle scenarios of what I am trying to do.  Note that the last one navigates to a different page entirely for the other tabstrip, which I have working on my development machine but do not know how to do in jsfiddle, if it can even be done there  The third version essentially creates two mobile apps.

Mobile TabStrip - hide/show tabset  
Onclick of Settings tabstrip icon hides Home tabstrip and displays Settings tabstrip via CSS changes and grabbing the HREF from anchor tags. 

Mobile TabStrip - replace tabstrip HTML  
Onclick of Settings tabstrip icon replaces tabstrip DIV HTML content with contents of Settings tabs div. It grabs the HREF from anchor tags for highlighting current tab. 

Mobile TabStrip - separate page per tabstrip  
Onclick of Settings tabstrip icon goes to new page with different tabstrip and vice versa to Home. The tabset attribute acts like a boolean for navigation to new page. 

Thank you!

[Petyo]

Hi,

For that case, you can consider using multiple layouts with different tabstrips. 

Greetings,
Petyo
the Telerik team