Tabnav
¶ ↑
Tabnav
is a helper for generating navigation bars. It allows you to simply specify highlighting rules for each tab.
-
Homepage: github.com/unboxed/tabnav
-
Issues: github.com/unboxed/tabnav/issues
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:
<ul> <li class="active"><a href="/">Home</a></li> <li><a href="/froobles">Froobles</a></li> </ul>
On any action in FrooblesController will output:
<ul> <li><a href="/">Home</a></li> <li class="active"><a href="/froobles">Froobles</a></li> </ul>
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:
<ul> <li><a href="/">Home</a></li> <li class="active"> <a href="/froobles">Froobles</a> <ul> <li class="active"><a href="/froobles/new">New Frooble</a></li> <li><a href="/froobles/search">Search Froobles</a></li> </ul> </li> </ul>
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:
<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 id="froobles"> <span>Froobles</span> <ul> <li class="active"><a href="/froobles" target="_blank" rel="http://foo.bar/">All Froobles</a></li> </ul> </li> </ul>
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:
<div class="my_custom_class"> <%- if tab.has_link? -%> <%= link_to tab.name, tab.link_url %> <%- else -%> <span><%= tab.name %></span> <%- end -%> </div>
On froobles/index the output will be:
<ul id="main_navigation" class="clearfix"> <li class="home_tab"><div class="my_custom_class"><a href="/">Home</a></div></li> <li class="heading active"><div class="my_custom_class"><span>Froobles Heading</span></div></li> <li class="active"><div class="my_custom_class"><a href="/froobles">Froobles</a></div></li> </ul>
Attributions¶ ↑
The concept for this is based on the tabnav component from rails_widgets: 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¶ ↑
Copyright © 2012 Alex Tomlins and Unboxed Consulting. See LICENSE for details.