Tabnav

Tabnav is a helper for generating navigation bars. It allows you to simply specify highlighting rules for each tab.

Some Examples

Simple Example

In your 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
%>

On home/index will output:

On any action in FrooblesController will output:

See the highlights_on method of Tabnav::Tab for full details of the highlighting logic.

Nested navbars

In your 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_sub_nav do |sn|
    sn.named "Froobles"
    sn.links_to froobles_path
    sn.highlights_on :controller => :froobles

    sn.add_tab do |t|
      t.named "New Frooble"
      t.links_to new_frooble_path
      t.highlights_on :controller => :froobles, :action => :new
      t.highlights_on :controller => :froobles, :action => :create
    end

    sn.add_tab do |t|
      t.named "Search Froobles"
      t.links_to search_froobles_path
      t.highlights_on :controler => :froobles, :action => :search
    end
  end
end
%>

On FrooblesController#new will output:

Navbars can be nested arbritarily deep.

Options for controlling markup

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_sub_nav :id => 'froobles' do |sn|
    sn.named "Froobles"

    sn.add_tab do |t|
      t.named "All Froobles"
      t.links_to froobles_path, :target => "_blank", :rel => "http://foo.bar/"
      t.highlights_on :controller => :froobles, :action => :index
    end
  end
end
%>

On froobles/index will output:

Custom tab partial

It is also possible to specify a partial to be used to generate the tab contents. e.g.:

View:

<%
render_tabnav :html => {:id => "main_navigation", :class => "clearfix"} do |n|
  n.tab_partial "/shared/my_custom_tab"
  n.add_tab :html => {:class => "home_tab"} do |t|
    t.named "Home"
    t.links_to root_path
    t.highlights_on :controller => :home, :action => :index
  end
  n.add_tab :html => {: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
%>

In the partial, tab will be the Tab instance to be rendered.

in /app/views/shared/_my_custom_tab.html.erb:

<%- if tab.has_link? -%> <%= link_to tab.name, tab.link_url %> <%- else -%> <%= tab.name %> <%- end -%>

On froobles/index the output will be:


Attributions

The concept for this is based on the tabnav component from rails_widgets: http://github.com/paolodona/rails-widgets

Note on Patches/Pull Requests

  • Fork the project.
  • Make your feature addition or bug fix.
  • Add tests for it. This is important so I don't break it in a future version unintentionally.
  • Commit, do not mess with Rakefile, gemspec, version, or history. (if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull)
  • Send me a pull request. Bonus points for topic branches.

Copyright (c) 2012 Alex Tomlins and Unboxed Consulting. See LICENSE for details.