XF 2.2 Tabbed experience

[stromb0li]

Pretty generic question, but does XenForo have a standardized experience for building tabbed controls for public templates? Ideally, I'd like to use something native to XenForo vs bloat the page with bootstrap or something else. Generic Example: https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior

Thank you!

 

[Max Taxable]

Xenforo vs. Bloat that's a great standard.

 

[digitalpoint]

If you mean tabs like on member profiles, yes… there is a standard way to do it.

 

[stromb0li]

Thank you @digitalpoint! That's what I was looking for

Here's a quick reference in simplest form for others.

<h2 class="block-tabHeader block-tabHeader--memberTabs tabs hScroller"
    data-xf-init="tabs h-scroller"
    data-panes=".js-tabPanes"
    data-state="replace"
    role="tablist">
    <span class="hScroller-scroll">
        <a href="{{link('tab1')}}"
           class="tabs-tab is-active"
           role="tab"
           aria-controls="tab1">Tab 1</a>
    </span>
    <span class="hScroller-scroll">
        <a href="{{link('tab2')}}"
           class="tabs-tab"
           role="tab"
           aria-controls="tab2">Tab 2</a>
    </span>
    <span class="hScroller-scroll">
        <a href="{{link('tab3')}}"
           class="tabs-tab"
           role="tab"
           aria-controls="tab3">Tab 3</a>
    </span>
</h2>

<ul class="tabPanes js-tabPanes">
    <li class="is-active" role="tabpanel" id="tab1">
        Tab 1
    </li>
    <li class="is-active" role="tabpanel" id="tab2">
        Tab 2
    </li>
    <li class="is-active" role="tabpanel" id="tab3">
        Tab 3
    </li>
</ul>

 

[digitalpoint]

Sorry I didn’t give more specific info (I wasn’t close to a computer).

 

[stromb0li]

No worries! This was perfect to get started. Totally forgot members profile had such an experience