Skip to content
This repository


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Plug-in to manage tabbed interfaces with ease in Ruby on Rails (or really any menu navigation)

branch: master

Fetching latest commit…


Cannot retrieve the latest commit at this time

Octocat-spinner-32 lib
Octocat-spinner-32 tasks
Octocat-spinner-32 test
Octocat-spinner-32 .gitignore
Octocat-spinner-32 MIT-LICENSE
Octocat-spinner-32 README.markdown
Octocat-spinner-32 Rakefile
Octocat-spinner-32 init.rb
Octocat-spinner-32 install.rb
Octocat-spinner-32 uninstall.rb

TabFu 0.2.0

TabFu is a Ruby on Rails plug-in designed to ease the management of a tabbed interface such as an admin panel. It allows you to programmatically create the HTML for the list-based tabs and then choose which of the tabs is the current one at the controller, action, or view level.


class ApplicationController
  include TabFu
  tab :home # default tab, optional

class UsersController < ApplicationController
  tab :users

  def contact
    tab :contact, :custom_id => :two

    # also accepted:
    # - `tab :custom_id => :two`  # main tabs will default to :home
    # - `tab :contact; tab :custom_id => :two` # same result as current

# layout/application.html.erb
# ...
<div id="menu">
  <% tabs do |tab| %> # id parameter is optional
    <%= tab.home "Go Home!", root_url %>
    <%= tab.about "About", "/about" %>
    <%= tab.users "Users", users_url %>
    <%= "Contact", "/users/contact" %>
  <% end %>

<div id="menu-2">
  <% tabs('custom_id') do |tab| %>
    <%= "I am First!" %> # no URL parameter will default to '#'
    <%= tab.two "Second" %>
    <%= tab.three "Third" %>
    <%= tab.four "Last :(" %>
  <% end %>

If you then access "/users/contact", the #menu div will look like:

<div id="menu">
    <li class="home"><span><span><a href="/">Go Home!</a></span></span></li>
    <li class="about"><span><span><a href="/about">About</a></span></span></li>
    <li class="users"><span><span><a href="/users">Users</a></span></span></li>
    <li class="contact active"><span><span><a href="/users/contact">Contact</a></span></span></li>

<div id="menu-2">
  <ul id="custom_id">
    <li class="one"><span><span><a href="#">I am First!</a></span></span></li>
    <li class="two active"><span><span><a href="#">Second</a></span></span></li>
    <li class="three"><span><span><a href="#">Third</a></span></span></li>
    <li class="four"><span><span><a href="#">Last :(</a></span></span></li>

To Do

  • [IMPLEMENTED] Lists with different ids will be treated independently. Choosing the current tab will be with a syntax similar to tab :list_id => :tab_identifier with the option to specify more than one at once.
  • Customize list-item html (i.e. choose not to have <span><span> junk)
  • Tests/Specs! (for now this plug-in is just pulling code out from an existing project)
  • RDocs


Copyright (c) 2008 Bodaniel Jeanes, released under the MIT license.

In other words, go wild and fork it! Please just send back any additions!

Something went wrong with that request. Please try again.