Using this standard JHtml code, I can generate Horizontal tabs (across the top) without problem. I've been tinkering with the $options array to set it up, but JHtml seems to have changed a bunch, and I don't seem to be able to find the secret combination of settings to get Vertical tabs instead.

enter image description here

JHtml that renders Horizontal Tabs

$options = array(
    'useCookie' => true, // this must not be a string. Don't use quotes.
echo JHtml::_('tabs.start', 'tab_group_id', $options);
echo JHtml::_('tabs.panel', 'Tab Heading 1', 'panel_1_id');
echo 'Panel 1 content goes here.';
echo JHtml::_('tabs.panel', 'Tab Heading 2', 'panel_2_id');
echo 'Panel 2 content goes here.';
echo JHtml::_('tabs.panel', 'Tab Heading 3', 'panel_3_id');
echo 'Panel 3 content goes here.';
echo JHtml::_('tabs.end');

HTML that renders the desired Vertical tabs

<div id="my-panels" class="tabbable tabs-left">
    <ul class="nav nav-tabs">
        <li><a href="#panel_1_id" data-toggle="tab">Tab Heading 1</a></li>
        <li><a href="#panel_2_id" data-toggle="tab">Tab Heading 2</a></li>
        <li><a href="#panel_3_id" data-toggle="tab">Tab Heading 3</a></li>
    <div class="tab-content">
        <div class="tab-pane" id="panel_1_id">Some Content1</div>
        <div class="tab-pane" id="panel_2_id">Some Content2</div>
        <div class="tab-pane" id="panel_3_id">Some Content3</div>

Is it something in $options that has to be set, or is it something else altogether in JHtml that I should be using?

1 Answer 1


Firstly, you are using the Joomla 3.0 method for adding tabs. There is a newer method as of Joomla 3.1 which unfortunately is not documented at all apart from the API page.

With the new tab method, all you need to do is wrap it round a div with a specific class like so:

$options = array(
    'useCookie' => true,
    'active' => 'tabs_1'

// Start Tabs
echo '<div class="tabbable tabs-left">';
echo JHtml::_('bootstrap.startTabSet', 'tab_group_id', $options);

// Tab 1
echo JHtml::_('bootstrap.addTab', 'tab_group_id', 'tabs_1', 'Tab 1');
echo '<p>Lorem ipsum dolor.</p>';
echo JHtml::_('bootstrap.endTab');

// Tab 2
echo JHtml::_('bootstrap.addTab', 'tab_group_id', 'tabs_2', 'Tab 2');
echo '<p>Lorem ipsum dolor.</p>';
echo JHtml::_('bootstrap.endTab');

// End Tabs
echo JHtml::_('bootstrap.endTabSet');
echo '</div>';

Tested and working in Joomla 3.3.6


If you wish you style the tabs in some way, shape or form, you can simply add a class to the div wrapper like so:

echo '<div class="tabbable tabs-left gdp-tabs">';

and then to style the a or li elements, simply use:

.gdp-tabs li {
   //code here
.gdp-tabs li a {
   //code here
  • google.com/finance?q=NASDAQ:FLWS
    – GDP
    Dec 8, 2014 at 19:07
  • Lol, well I think an included vase would be nice so I'll take these: interflora.co.uk/product/orchids/…
    – Lodder
    Dec 8, 2014 at 19:11
  • I noticed that this doesn't add IDs to any of the LI or A items. Is there a way to add classes or IDs to the tabs to apply CSS or use jQuery for selected items?
    – GDP
    Dec 8, 2014 at 20:14
  • @GDP - I know you know the answer to that ;) I'll post for info for this in an hour if you still require it
    – Lodder
    Dec 8, 2014 at 20:20
  • 1
    Ah...the Yoda-Of-Front-End-Development is going to make the lowly systems guy sweat, huh?
    – GDP
    Dec 8, 2014 at 20:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.