Tabulous provides an easy way to add tabs to your Rails application.

Tabulous works with Rails 3.0, 3.1 and 3.2. It has been tested on Ruby 1.8.7, 1.9.2 and 1.9.3.

Traditionally, implementing tabs in Rails involves adding logic to your views and sprinkling tab-related code all over your controllers. Tabulous takes a different approach and consolidates all of the tab-related code into one configuration file. Apart from this configuration file, you just have to call <%= tabs %> and <%= subtabs %> in your view layout(s) and then create your own CSS styles for the tabs.

To get started, add the gem to your Rails application’s Gemfile and install it using:

bundle install

Then generate the tab file:

rails generate tabs

This will generate app/tabs/tabulous.rb. Open the file and configure it to your liking. You’ll notice the code is formatted into a grid. After you edit the file, run the following rake task to prettify the code back into a nice grid:

rake tabs:format

Make sure you call the following view helpers in your layout(s):

<%= tabs %>
<%= subtabs %>

The tabs helper will generate markup that looks like this:

<div id="tabs">
  <ul>
    <li class="active enabled"><span class="tab">Explanation</span></li>
    <li class="inactive enabled"><a href="/galaxies/elliptical_galaxies" class="tab">Galaxies</a></li>
    <li class="inactive enabled"><a href="/exoplanets" class="tab">Planets</a></li>
    <li class="inactive enabled"><a href="/stars" class="tab">Stars</a></li>
    <li class="inactive disabled"><span class="tab">Asteroids</span></li>
  </ul>
</div>

And the subtabs helper will generate markup that looks like this:

<div id="subtabs">
  <ul>
    <li class="active enabled"><span class="tab">Exoplanets</span></li>
    <li class="inactive enabled"><a href="/rogue_planets" class="tab">Rogue Planets</a></li>
  </ul>
</div>

Tabulous will start you off with some CSS scaffolding but you’ll eventually want to create your own CSS.

There is a tutorial at techiferous.com/2011/03/tutorial-for-adding-tabs-to-rails-using-tabulous/

Also, look in this gem’s test/applications directory to find working example applications. Look at their app/tabs/tabulous.rb and app/layouts/application.html.erb files.

To get tabulous to work with Twitter Bootstrap version 2, make sure the following values are set in app/tabs/tabulous.rb:

• config.css.scaffolding = false

• config.tabs_ul_class = “nav nav-pills” # or whatever Bootstrap class you want

• config.bootstrap_style_subtabs = true

• config.active_tab_clickable = true

When config.bootstrap_style_subtabs is set to true, the subtabs are rendered inside the tab markup, so you only need to call the tabs helper in your layout, not the subtabs helper.

Also note that if you use Twitter Bootstrap, you lose the ability to disable individual subtabs.

Developers are encouraged to contribute ideas or code.

To make code changes:

• First, check out this gem’s code from github.

• Next, type bundle install in tabulous’s directory. This will install any gems you need for developing tabulous.

• Then go to each directory in test/applications and type bundle install. This makes sure the test applications have the gems that they need to run.

• To save you the effort of having to create and migrate databases for each test application, I’ve committed the sqlite databases of each test application to the repository.

• Now go to tabulous’s directory and type rake test. If everything has been installed properly, all of the tests will pass.

• Now you should be all set to code.

Please send me a message if you find any confusing or incorrect documentation in tabulous or if you encounter any bugs. Thank you and enjoy!