There was interest in the dynamic solution that Kaela alluded to her in post, so I took a quick stab at tweaking her code. Below I'll show two different approaches to accomplish basically the same thing. The approaches differ primarily in the styling methodology.
Approach #1
The first approach is basically a direct transformation of Kaela's code. I've made a few minor tweaks and added some logic to dynamically construct the tabs as well as to construct the appropriate styling rule. Please note that this example grabs the top-level categories of the community. If you wanted to grab nested categories also, or if you wanted to include other nodes such as boards or blogs, you will need to tweak the REST API call a bit, but the approach is basically the same.
<#assign ancestors = coreNode.ancestors?reverse />
<#assign selectedTab = "" >
<#if ancestors?size gt 1 >
<#assign selectedTab=ancestors[1].id>
<#else>
<#assign selectedTab=coreNode.id>
</#if>
<#if selectedTab != "">
<style>
.nav-${selectedTab} { background: yellow; }
</style>
</#if>
<#assign categories = rest("categories").categories />
<ul class="custom-nav-wrapper">
<#list categories.category as category>
<li class="nav-${category.id}">
<a href="${category.@view_href}"><span>${category.title}</span></a>
</li>
</#list>
</ul>
As before we use the ancestors to determine which tab should be shown as selected. I use this to create a style rule based on the id of the selected node. Then we make a REST API call to get the top-level categories and iterate through these to dynamically create the tabs.
Approach #2
This approach is very similar. The main difference comes in the styling. Instead of dynamically creating a style rule, I'm going to dynamically apply a class to the selected tab instead. This would allow me to move the style rule out of the component if I wanted to.
<#assign ancestors = coreNode.ancestors?reverse />
<#assign selectedTab = "" >
<#if ancestors?size gt 1 >
<#assign selectedTab=ancestors[1].id>
<#else>
<#assign selectedTab=coreNode.id>
</#if>
<style>
.custom-nav2-wrapper .selected { background: yellow; }
</style>
<#assign categories = rest("categories").categories />
<ul class="custom-nav2-wrapper">
<#list categories.category as category>
<li class="nav2-${category.id} <#if selectedTab == category.id>selected</#if>">
<a href="${category.@view_href}"><span>${category.title}</span></a>
</li>
</#list>
</ul>
You'll notice that my style rule no longer includes any FreeMarker variables; it's just a simple rule now. To compensate for this, I've added logic inside the HTML for the tab to add a class called "selected" if the tab should display as selected.
Which approach you use is really up to you depending on your design/styling goals. Keep in mind that as I mentioned previously, you may need to tweak a bit if you wanted to use different nodes for your tabs.
