If my memory serves Skuid Mobile panels functioned in much the same way.

---

Your memory does serve, Pat! Yes, that is essentially what I am talking about. Per a previous post of mine, having the option to minimize the tab menu to a hamburger menu (like mobile builder) would be great too.

---

I mocked up a page this evening that I believe is directionally what you’re looking to do. The key is to hide the tab’s native navigation component and provide an alternative method for navigating through different tabs to provide greater flexibility with the styling and experience.

I have a few concepts on the page that may be of interest.

• First, there's a parameter driven snippet that is used to activate the tab of interest so there's flexibility to invoke it from many places. This is a really simple script.


• Second, I'm using a ui only model to accept updates from the action framework (in the navigation component example) and it in turn executes the snippet with parameters based on the data values in the model.


• The snippet is driven off of the skuid.snippet.getSnippet() method, which I've become a huge fan of because it provides a lot of flexibility with passing parameters into the snippet and you can keep specific business rule outside of the code. The template example illustrates this.


• Finally, there's simple CSS to hide the native tab navigation

Here you go:














row.created











Use a Navigation component to trigger a new row on a UI only model, which in turn runs a snippet to update the active tab.
<br/><br/><br/>


















































Or you can pretty up templates, buttons or other components to update the tab navigation:
<br/><br/><br/>
<div class="bt" onclick="javascript:skuid.snippet.getSnippet('selectTab')(0);">Click Here for Tab1</div>
<div class="bt" onclick="javascript:skuid.snippet.getSnippet('selectTab')(1);">Click Here for Tab2</div>
<div class="bt" onclick="javascript:skuid.snippet.getSnippet('selectTab')(2);">Click Here for Tab3</div>
<div class="bt" onclick="javascript:skuid.snippet.getSnippet('selectTab')(3);">Click Here for Tab4</div>















<h1>Tab1 Content</h1>








<h1>Tab 2 Content</h1>






<h1>Tab 3 Content</h1>






<h1>Tab 4 Content</h1>























var index = argumentse0],
$ = skuid.$;
skuid.component.getById('TabSetTemplate').element.tabs("option","active",index);


.HideTabHeader .ui-tabs-nav {
display:none;
}
.bt{
display:inline-block;
min-width:10px;
padding:5px 7px;
font-size:18px;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:middle;
background-color:#034D70;
margin:3px;
border-radius:5px;
box-shadow: 0 2px 2px 0 #6D6E70;
width:95%;
transition-timing-function: ease;
transition-duration: 2s;
transition-property: width height background-color font-size left top transform -webkit-transform color;
}
.bt .nx-fieldtext{
color:#fff;
font-size:12px;
}

---

Thanks for digging into this, John. I’ll take a look at what you put together!

---