SeeSaw's blog: The easiest way to add tabbed navigation to your Rails app!

The easiest way to add tabbed navigation to your Rails app!

Paolo — Sun, 23 Jul 2006 20:09:00 -0500

UPDATE Feb 01, 2007: the Tabnav has been updated in order to work wit Rails 1.2, read this post fom more info.

Hi guys, during our development efforts we needed tabbed navigations. Well, after struggling with the acts_as_wizard plugin (you can find it in the toolbox) we decided to implement yet another rails plugin, and we think this time it’s even easier to use and someway plain cool.

Tabnav it’s so far the easiest way to build tabbed navigation like this:

The Tabnav Rails plugin provides nice tabbed navigation out of the box

All this magic it’s done by this fragment of code put inside my layout:

<%= start_tabnav :main %>
<%= @content_for_layout %>
<%= end_tabnav %>

Sounds cool? keep reading…

Where does the start_tabnav gets informations for tabs rendering? The :main Symbol let the start_tabnav method know to look for a special MainTabnav class where all the magic happens, so in my model directory I’ve got a main_tabnav.rb file containing something like:

class MainTabnav < Tabnav::Base       
  add_tab do 
    named 'Dashboard'
    titled 'Wooooow! what a wonderful tabbed navigation!'
    links_to :controller => 'dashboard'
  end

  add_tab do 
    named 'Users'
    links_to :controller => 'users'
  end 

  add_tab do 
    named 'Companies'
    links_to :controller => 'companies'
    highlights_on :controller => 'dashboard', :action => 'statistics'
  end 

  add_tab do 
    named 'Admin'
    links_to :controller => 'companies'
    show_if "params[:admin] == true"
  end      
end

This way you can manage your tabs in a view-indipendent manner. The MainTabnav class should be pretty self-explanatory… but let me point out a few nice features:

The titled method gives your tabs a html ‘title’ attribute so you can have tooltips over your tab link.
The links_to method creates the tab’s link. You can use the same options as the usual ActionView’s url_for. The tab will be automatically highlighted (with the help of a CSS class) if the page you’re viewing matches the links_to options. So if you’re linking to :controller => ‘dashboard’, you can be sure every dashboard’s action will keep the tab highlighted. If you’re linking to :controller => ‘dashboard’, :action => ‘index’ only the index action will highlight it.
You can add more highlighting rules using the highligths_on method. This could be useful if you have more than one controller that should highlight the same tab (eg: think about an estimate wizard involving multliple controllers, keeping an ‘estimates’ tab highlighted).
You can conditionally choose to show or not show a tab given a certain condition with the show_if method. The string parameter given will be evaluated in the view context, so you can show admin pages tabs only to administrators and so on.

It’s cool! Tell me how to use it!

Install it from your rails base directory with this: ruby script/plugin install svn://svn.seesaw.it/tabnav/tags/0.1

And generate how many tabbed navigations you like with:

ruby script/generate tabnav Main

Of course you can substitute ‘Main’ with the desired prefix of your tabnav class.

Then configure your Tabnav model as you desire and include a start_tabnav/end_tabnav statement in your layout or view files.

Can I customize the generated HTML/CSS?

The tabnav generator will create a partial file inside your view/tabnav directory. There you can customize the html and the inline CSS used by your tabnav. You can move the inline CSS to you stylesheet file too.

Can I nest navigations?

Yes of course, with tabnav you can easily do something like:

You can easily nest tabnavs. They rely on their own model, partial and CSS stylesheet.

Another little trick…

Last but not least you can have tabbed navigations without having a whole ‘containing box’ using just a:

<%= tabnav :main %>

This way you can do stuff like:

You can have just navigation tabs without the whole box attached under them

That’s it right now guys. Hope you find it useful! Don’t forget we need feedback, so feel free to comment on this post or send us a private email.

If you want to keep in touch with further developments you can even subscribe to our rss feed.

This plugin is part of the SeeSaw’s toolbox.

having trouble downloading the plugin? You can install it without subversion:

In vendor/plugins, create directory tabnav. In that directory download end extract this!

Update: Due to a server migration, we’ve moved our repositories to a new location… see this for more info.

"The easiest way to add tabbed navigation to your Rails app!" by Steve

Sat, 17 May 2008 03:48:28 -0500

Of course that only works in the development environment. I ended up having to just do the dynamic tabs manually. Sorry, didn’t have time to go in and figure it out this time…

"The easiest way to add tabbed navigation to your Rails app!" by Steve

Thu, 15 May 2008 16:12:56 -0500

[marco and paolo]

You can reload the tabnav.rb file without restarting the server the same way you reload models, by simply adding “include Reloadable” to it…

class ExampleTabnav < Tabnav::Base include Reloadable

add_tab do
  blah
end

end

"The easiest way to add tabbed navigation to your Rails app!" by manoharkundety@gmail.com

Wed, 09 Apr 2008 12:58:56 -0500

Hi Guys,right now I am working on Tabs . I got them but I am having a problem in it. It is like this : whenever I click on the Tab it is navigating to the controller’s index method . Here I want the data of the Tab with respect to its clicking .And help me in writing the Actions with respect to Tabs. Hope you all understood my problem and please help in fixing this .

Thanks & regards , Manohar manoharkundety@gmail.com

"The easiest way to add tabbed navigation to your Rails app!" by Kitty

Thu, 17 Jan 2008 08:16:22 -0600

I want student name in top of page & tabs like edit & show with that students id

try to work with proc but gives an error

Showing app/views/tabnav/_student_tabnav.rhtml where line #61 raised

:You must set a page before calling this method

(error on line #61 )

58:

<= link_to tab.name, tab.link, html_opts ->

Trace of template inclusion: /app/views/student/tabs.rhtml

My tabs page is
<%= tabnav :student %>

 name: <%= @student.name %>

Please any one help me

"The easiest way to add tabbed navigation to your Rails app!" by Win

Wed, 16 Jan 2008 16:30:53 -0600

This is a great plugin! Have you thought about creating one for ajax hooks?

"The easiest way to add tabbed navigation to your Rails app!" by ernesto73@ono.com

Sun, 30 Dec 2007 21:59:43 -0600

I’ve the same problem that Jignesh, matthibcn, Michiel, ...

undefined method `tabnav’ for #<#:0×4789cb4>

Do you know de solution?

thanks,

ern.

"The easiest way to add tabbed navigation to your Rails app!" by qwe

Wed, 24 Oct 2007 22:10:43 -0500

Yeah this plugin didnt work for me. Acted like it installed just fine, but when i ran the generator, got a “Couldnt find tabnav generator” error message! Keep up the good work guys

"The easiest way to add tabbed navigation to your Rails app!" by arf

Tue, 02 Oct 2007 16:13:34 -0500

What’s this plugin have over the one liner tab helper described in http://www.vaporbase.com/postings/A_tab_helper_that_works_for_me ?

"The easiest way to add tabbed navigation to your Rails app!" by Rv

Sat, 01 Sep 2007 18:23:20 -0500

Hi. How to highlight tab with more then one controller? Sth like highlights_on :controller=> ‘admin/one’, :controller => ‘admin/two’ ?

"The easiest way to add tabbed navigation to your Rails app!" by Matt

Sun, 26 Aug 2007 00:34:59 -0500

Nevermind. I got it working from one of the commments above. Thanks.

"The easiest way to add tabbed navigation to your Rails app!" by Matt

Sat, 25 Aug 2007 22:26:02 -0500

I’m new to Rails, but this plugin is going to save me a lot of work. Thanks for putting this together.

I need to pass in an id to build the links for each tab. How does one reference request parameters from the TabNav extension class?

"The easiest way to add tabbed navigation to your Rails app!" by Cássio

Mon, 20 Aug 2007 07:37:28 -0500

Hi there,

after generate a tabnav inside a folder:

#./script/generate tabnav dir/model

when a i call it in the view, like this:

start_tabnav :model

after that, this error appears:

/lib/ruby/gems/1.8/gems/activesupport-1.4.2/lib/active_support/dependencies.rb:477:in `const_missing’: uninitialized constant Symbol::ModelTabnav

this worked in the previous version, because i tested…but in the 1.2 it doesn’t work in the same way…

how do i call a tabnav, that is inside in a directory with the new tabnav version (1.2)?

"The easiest way to add tabbed navigation to your Rails app!" by Rob

Thu, 02 Aug 2007 17:39:21 -0500

My project requires rounded tabs, so I’m trying to modify the default views.

The generated rhtml partials appear to be empty (other than a comment).

I’ve added code to the partials, but the partials are not having any effect. Nor are they even being called.

How do I change from a simple list to something of my own devising?

"The easiest way to add tabbed navigation to your Rails app!" by Fiesa

Wed, 01 Aug 2007 19:25:15 -0500

hmm ok, this seems not loving to embed html-tags, so third try without tags: ul id=”order_tabnav” style=”list-style-image:url(/images/list_icon.gif)”

:-)

"The easiest way to add tabbed navigation to your Rails app!" by Fiesa

Wed, 01 Aug 2007 19:23:48 -0500

hum? last comment seemed to miss the code:

“

"The easiest way to add tabbed navigation to your Rails app!" by Fiesa

Wed, 01 Aug 2007 19:22:36 -0500

nice plugin! I wonder if it would be possible to add a image next to each tab-title? First try was to modifythe html-list-tag in …_tabnav.rhtml like this:

didn’t work so far, am not that experienced with rails or html :-(

Anyone has a idea how to make it work?

Thanks

"The easiest way to add tabbed navigation to your Rails app!" by Mo

Fri, 20 Jul 2007 04:06:42 -0500

this plugin is pretty cool but I have a bit of a problem.

I want the ability to assign the list item with the class ‘active’ as well when I indicate highlighting. I need this so my tab looks cool when highlighting as i’m doing the curvy image thing.

Not sure how i could do that without hacking your code.

Thanks

"The easiest way to add tabbed navigation to your Rails app!" by Tom Meinlschmidt

Sat, 05 May 2007 23:05:02 -0500

to “peter Salomon”... with grouped controllers

just use

add_tab do named ‘Albums’ links_to :controller => ‘admin/albums’ end

without starting ”/” in links_to .. it works :)

"The easiest way to add tabbed navigation to your Rails app!" by Dipesh

Thu, 03 May 2007 11:43:25 -0500

Hi, Thanks for such a great plugin. I have been trying to dynamically add a tab into the tabnav. What user does is, clicks on a link on a page, this should rout the resquest to an action in a controller. This action should have the logic to dynamically create a control. Now had some success with this, I did something like this:

def show @group = g = Group.find(params[:id]) ListTabsTabnav.add_tab { named g.name; links_to :controller => “groups”, :action => “show”, :id => g.id } end

This works fine as long as FastCGI is not on. When I put my app on FastCGI, problems begins. Once the tab is dynamically created it just stays there forever. Even if i change page. I have to kill the fcgi dispatcher, to remove it.

Is there some better way to handel this problem?

"The easiest way to add tabbed navigation to your Rails app!" by conradwt@gmail.com

Thu, 03 May 2007 00:50:40 -0500

Hi, I was thinking that it would be cool if I could simply use render instead of links_to. I say this because I want to do is render content for a tab. What do you think about this?

"The easiest way to add tabbed navigation to your Rails app!" by conradwt@gmail.com

Thu, 03 May 2007 00:13:34 -0500

Hi, after adding the appropriate link_to, the tabs disappear after selection.

"The easiest way to add tabbed navigation to your Rails app!" by Jignesh

Fri, 27 Apr 2007 14:51:57 -0500

I managed to get it up running but facing new problem. How to use ‘links_to’ to specify the content div as watever :action i’m setting rite shows up the content on new page without the tabs?

"The easiest way to add tabbed navigation to your Rails app!" by Jignesh

Fri, 27 Apr 2007 12:32:07 -0500

I’m not able to make it work. I’m using InstantRails. Its giving me ‘undefined method `start_tabnav’ for #<#:0×47cc758>’ error. I’ve extracted the tar file under vendor/plugins dir of my app. Please help !!!!

"The easiest way to add tabbed navigation to your Rails app!" by bang bros

Tue, 24 Apr 2007 12:44:36 -0500

I am here to notify you that in the end of April 2007 will be Ruby and WP community party at NY, US.

"The easiest way to add tabbed navigation to your Rails app!" by Strafverteidiger München

Fri, 20 Apr 2007 19:37:29 -0500

I’ll keep playing around :-) Thanks!