I’ve just released my new gem simple_navigation. This gem help’s you to create a navigation menu for your Ruby on Rails application.
Installation
Edit your config/environment.rb to setup simple_navigation gem:
config.gem "mexpolk-simple_navigation",
:lib => "simple_navigation",
:source => "http://gems.github.com"
And from the command line, install the plugin:
Usage
To create your menus create a new file named config/initializers/simple_navigation.rb like this:
SimpleNavigation::Builder.config do |map|
map.navigation :default do |navigation|
# Root menu without child elements (menus) that points to /dashboard
navigation.menu :home, :url => { :controller => "home", :action => "index"}
# Root menu with child menus without anchor link
navigation.menu :contacts do |contacts|
# Child menu with many possible urls (or many controllers and actions)
contacts.menu :list, :url => { :controller => "contacts", :action => "index" } do |contact_list|
# This menu will marked as current when you're on the following
# controllers and actions (including the controller and action
# specified in the :url option):
contact_list.connect :controller => "contacts" # ...current on any action from this controller
contact_list.connect :controller => "people", :except => "new"
contact_list.connect :controller => "companies", :except => "new"
end
# Another submenu that points to /person/new
contacts.menu :new_person, :url => { :controller => "people", :action => "new" }
# Another submenu that points to /company/new
contacts.menu :new_company, :url => { :controller => "companies", :action => "new" }
end
# Another root menu with nested submenus
navigation.tab :admin, :url => { :controller => "users", :action => "index" } do |admin|
admin.menu :users, :url => { :controller => "users", :action => "index" } do |users|
users.menu :reports, :url => { :controller => "user_reports", :action => "index" } do |reports|
reports.menu :activity, :url => { :controller => "user_reports", :action => "activity" }
reports.menu :login_atempts, :url => { :controller => "user_reports", :action => "login_atempts" }
end
users.menu :new_user, :url => { :controller => "users", :action => "new" }
end
end
end
end
Finally, to render you newly created menu called :default, in your default layout (layout/application.erb):
<%= simple_navigation :default %>
Ready for Internationalization (i18n)
If you want to use internationalization in your menus, set the option :i18n => true like this:
SimpleNavigation::Builder.config do |map|
map.navigation :default, :i18n => true do |navigation|
...
end
end
And add to your config/locales files (e.g. es-MX.yml) the following:
es-MX:
simple_navigation:
default: # The name of your navigation menu
home: # The name of your root menu
title: "Inicio" # The translated title for your root menu
menus:
index:
title: "Panel de Control" # The title for index action child menu
new:
title: "Nueva Página" # The title for new action child menu
Sample Application
I have a sample application at GitHub so you can see it work. This application has the following configuration (config/initializers/simple_navigation.rb):
SimpleNavigation::Builder.config do |map|
map.navigation :default, :i18n => true do |navigation|
navigation.menu :home, "Wellcome", :url => { :controller => "home", :action => "index" } do |home|
home.menu :settings, "Appliction Settings", :url => { :controller => "home", :action => "settings"}
end
navigation.menu :pages, :url => { :controller => "pages", :action => "index" } do |pages|
pages.menu :page_one, "One", :url => { :controller => "pages", :action => "one" }
pages.menu :page_two, "Two", :url => { :controller => "pages", :action => "two" }
end
end
end
When you render the navigation menu, it creates an unordered list like this:
<ul id="simple_navigation_default" class="simple_navigation" depth="0">
<li id="simple_navigation_default_menus_home" class="menu" drop_down="true">
<a href="/home">Wellcome</a>
<ul id="simple_navigation_default_menus_home_menus" depth="1" style="display: none;">
<li id="simple_navigation_default_menus_home_menus_settings" class="menu" drop_down="false">
<a href="/home/settings">Appliction Settings</a>
</li>
</ul>
</li>
<li id="simple_navigation_default_menus_pages" class="menu current_child" drop_down="true">
<a href="/pages">Pages</a>
<ul id="simple_navigation_default_menus_pages_menus" depth="1" style="display: none;">
<li id="simple_navigation_default_menus_pages_menus_page_one" class="menu" drop_down="false">
<a href="/pages/one">One</a>
</li>
<li id="simple_navigation_default_menus_pages_menus_page_two" class="menu current" drop_down="false">
<a href="/pages/two">Two</a>
</li>
</ul>
</li>
</ul>
This result, with a little help of our friends CSS+Javascript will result in something like this:

Screenshot-Simple Navigation - Sample Application - Mozilla Firefox
Check the Simple Navigation Example yourself… Hope you enjoy it!