Custom navigation for a tabset

Ideas
,
1

I have a tabset and the options for rendering the tabs (top, left or right) don’t quite work for my need. (I need left navigation, but I also need other stuff in that left pane.) So I think I want to render the tabset without the tab labels and create a side nav bar in a separate template to act as pseudo tab labels. To get rid of the tab labels and not leave empty white space, I figure I’ll find their CSS class and set display:none on them. Then to activate the side nav bar, it looks like I need to use the aria settings. Is this the right approach? And is there any documentation on the aria stuff? Thanks heaps.

2

I think I’ve nailed the first half of this. I’ve hidden the standard tab nav bar by giving my tabset a unique ID of sidenavtabs and defining CSS as: #sidenavtabs .ui-tabs-nav{ display:none; } But enabling the side nav bar to activate the tabs remains a mystery. I could do something in Javascript, but it looks as though the existing solution is lighter weight than that, so I want to reuse that if possible.

3

Consider this a significant hack, and NOT supported or encouraged by Skuid, but, nonetheless, posted here for the adventurous soul who remains undeterred. We have considered allowing you to do this from the Skuid Page Builder UI, so I am going to change this to be an “Idea”, but here is a way to achieve this right now, which we may or may not implement in the future: Here we assume you have a Skuid Page Layout with a Panel Set of type “Fluid with Sidebar”, and the Sidebar is where you want to put the Left Navigation for a Main Tab Set that is in your Fluid Panel: and we assume that your goal is to put the Left Navigation into the Left Panel of your Panel Set. Here’s how to do it: 1. Give your Tab Set a unique Id, e.g. “#GlennMainTabs”, and Render As “Left Tabs”. 2. Give your Panel Set a unique Id, e.g. “#GlennMainPanelSet”. 3. Add a JavaScript Resource of type “Inline” into your Skuid Page with this body:

(function(skuid){ var $ = skuid.$; $(function(){ // // SETTINGS -- change as appropriate for your page // var tabSetUniqueId = 'GlennMainTabs', panelSetUniqueId = 'GlennMainPanelSet'; // // TAB-REARRANGEMENT LOGIC // var mainTabs = $('#'+tabSetUniqueId+').removeClass('nx-lefttabs'); var tabNavigation = mainTabs.children('.ui-tabs-nav'); var newTabNavHeader = $('').addClass('ui-tabs nx-lefttabs'); tabNavigation.detach().appendTo(newTabNavHeader); var leftPanelInner = $('#'+panelSetUniqueId+' > .nx-panel-left > .nx-panel-left-inner'); leftPanelInner.append(newTabNavHeader); }); })(skuid);

Result:

4

Wow, thanks Zach. That suits my scenario perfectly. Now, much as I love a good adventure, this is to go into a packaged product, so not a natural home for unsupported hacks. We will of course test new versions of Skuid before installing them into customer orgs, which manages the risk. But I wonder if this is an appropriate approach for a product. Hmm.

5

Thought I’d let you know that we adjusted our UI design a little and were able to get away with a left nav bar on a standard tabset with a little CSS prettiness added. Looks great and we get to sleep well at night knowing that we haven’t been too intrepid.