Announcing: Tabnav

I've just released a new gem called Tabnav. It's a Rails helper for generating navbars. It allows you to specify highlighting rules for each nav item in a clean way without lots of conditionals in your views.

It is loosely based on the widget from rails-widgets, and uses a similar DSL. You may ask why I bothered writing this if something similar already exists. Well, simply, there are some things about the rails-widgets implementation that I really don't like. Specifically, it hijacks javascript_include_tag to insert it's own javascript. This sort of thing should be explicit. Also the markup it generates could be cleaner - it has some unnecessary extra tags in it, and repeated class names. I created this to clean up these problems, and add new features. I've added support for custom partials for tab contents, and I plan to add support for nested menus in the next version.

So how does it work? Well, that's easiest to show with some examples...

A Basic Navbar

In the view:

<% render_tabnav do |n| n.add_tab do |t| t.named "Home" t.links_to root_path t.highlights_on :controller => :home, :action => :index end n.add_tab do |t| t.named "Froobles" t.links_to froobles_path t.highlights_on :controller => :froobles end end %>

When rendering the home page

<ul> <li class="active"><a href="/">Home</a></li> <li><a href="/froobles">Froobles</a></li> </ul>

It allows lots of control over the generated markup:

In the view:

<% render_tabnav :id => "main_navigation", :class => "clearfix" do |n| n.add_tab :class => "home_tab" do |t| t.named "Home" t.links_to root_path t.highlights_on :controller => :home, :action => :index end n.add_tab :class => "heading" do |t| t.named "Froobles Heading" t.highlights_on :controller => :froobles end n.add_tab do |t| t.named "Froobles" t.links_to froobles_path, :target => "_blank", :rel => "http://foo.bar/" t.highlights_on :controller => :froobles, :action => :index end end %>

On froobles/index outputs:

<ul id="main_navigation" class="clearfix"> <li class="home_tab"><a href="/">Home</a></li> <li class="heading active"><span>Froobles Heading</span></li> <li class="active"><a href="/froobles" target="_blank" rel="http://foo.bar/">Froobles</a></li> </ul>

and if that's not enough for you, you can even specify your own partial to be used to render the tab contents.

Check out the github project page for full documentation etc. For feature requests or bug reports use the github issue tracker.

Enjoy.