TabsOnRails: creating and managing Tabs with Ruby on Rails

TabsOnRails is a simple Rails plugin for creating and managing Tabs. It provides helpers for creating tabs with a flexible interface.

If you ever had to create a tab-based navigation menu at least once, you perfectly know how much it can annoying. You have to create the menu, set active status in your controllers and reflect selection status in your view. TabsOnRails does all the boring stuff for you and let you focus on the customization.

Let me show you how it works.

Quick Start

In your template use the tabs_tag helper to create your tab.

<% tabs_tag do |tab| %>
  <%= tab.home       'Homepage', root_path %>
  <%= tab.dashboard  'Dashboard', dashboard_path %>
  <%= tab.account    'Account', account_path %>
<% end %>

The example above produces the following HTML output.

<ul>
  <li><a href="/">Homepage</a></li>
  <li><a href="/dashboard">Dashboard</a></li>
  <li><a href="/account">Account</a></li>
</ul>

The usage is similar to the Rails route.rb file. You create named tabs with the syntax tab.name_of_tab. The name you use creating a tab is the same you’re going to refer to in your controller when you want to flag the tab as active with current_tab.

class DashboardController < ApplicationController
  current_tab :dashboard
end

Now, for any action defined in the DashboardController, the template will automatically render the following HTML code.

<ul>
  <li><a href="/">Homepage</a></li>
  <li><span>Dashboard</span></li>
  <li><a href="/account">Account</a></li>
</ul>

Restricting current_tab scope

Off course, there are specific situations where you need to change current_tag only for some specific action in your controller.

The current_tab method understands all options you are used to pass to a Rails controller filter. In fact, behind the scenes this method uses a before_filter to set a special @current_tab variable. Taking advantage of Rails filter options, you can restrict a tab to a selected group of actions in the same controller.

class PostsController < ApplicationController
  current_tab :admin
  current_tab :posts, :only => [ :index, :show ]
end

class ApplicationController < ActionController::Base
  current_tab :admin, :if => :admin_controller?

  def admin_controller?
    self.class.name =~ /^Admin(::|Controller)/
  end
end

Customizations

All your tabs belongs to you! Easily to understand, your tab structure might be slightly different that the default one. For example, you might want to flag the active tab with a current CSS class and preserve the link with a nice hover effect. Or perhaps your tab is an ordered list (<ol>).

No problem! The library is completely customizable using custom builders. See the documentation for further details on how to create and use a custom Tab Builder.

Here’s just a couple of examples created using custom builders.

Cool! How do I get the plugin?

The plugin source is available on GiHub, the project documentation and tickets are hosted on my Redmine installation.

The plugin is available both as a GEM and as a Rails plugin. See the documentation page to learn how to install it.

Related posts:

1. TabsOnRails graduated from beta
2. TabsOnRails 0.3.0 with concurrent tabs support aka namespaces
3. TabsOnRails 0.8.0
4. BreadcrumbOnRails now open-source
5. Helperful: a large collection of Rails Helpers