I am trying to use Vertical Tabs on the front end of my site.

Normally, I would just add a jQuery plug-in to my theme. However, vertical tabs are built into Drupal 7, so it seems silly to use a plugin, when the functionality already exists.

I'm just not sure how to call the built-in vertical tabs.

Dan Silver's blog has an excellent tutorial on how to call the built-in tabs. However, his tutorial is for horizontal tabs. I am not sure how to convert them to vertical ones.

I would appreciate if anyone could give me some hints.

(P.S. I am aware that modules exist to do this. However, for my purposes it seems overkill to use a module when I can achieve it with a few simple lines of theming).

1 Answer 1


The examples module will provide you some custom code to implement this, have a look at the API documentation which add a vertical tab to the node form.

The only restriction I can think of is that this code is for forms so if you want to theme a node output you should use jQUery UI tabs. The tutorial you linked seems fine, but you'll need to change a little its CSS classes in order to output vertical tabs, compare its code tho this demo.

  • Does this mean that the vertical/horizontal aspect is controlled fully by CSS? (I.e. the Jquery remains the same regardless if you want a horizontal or vertical menu?)
    – big_smile
    Commented Dec 18, 2011 at 22:08
  • That is correct, compare the source code of the default tabs implementation vs the vertical one, there's only a few CSS lines that differ for the class .ui-tabs-vertical.
    – tostinni
    Commented Dec 19, 2011 at 0:00

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.