So many of components we build into our web applications have a grain of an extractable element, a standardization waiting to happen. Starting today, I am putting together a “Standard UI Kit” for all of the tools that help me build interfaces faster. Together, they are called the UberKit. This week, the first segment is coming: UberMenus.
UberMenu: Abstract Menu Generation
Most people who build interfaces will build their menus with the same structure over and over. I finally took the time to abstract this out into a single helper that can pretty much serve all of my navigational needs. Here’s how you use it in a view:
<% ubermenu do |m| %> <% m.action 'Home', '/' %> <% m.action 'Users', users_path %> <% m.action 'Log Out', logout_path, :class => "special" %> <% end %>
Becomes this HTML (assuming you’re at the document root):
<ul> <li class="first current first_current"><a href="/">Home</a></li> <li><a href="/users">Users</a></li> <li class="special last"><a href="/logout">Log Out</a></li> </ul>
current class will automatically be set on whichever page responds to the built-in Rails helper
current_page? and the
action syntax behaves just like a
link_to. If a given action has multiple classes, they will also be joined with underscores as an additional class for browsers that do not support multiple class declarations. But in addition to easily creating simple menus, you can also easily generate multi-level navigation menus:
<% ubermenu 'nav' do |m| %> <% m.action 'Home', home_path %> <% m.submenu 'Services', services_path do |s| %> <% s.action 'Service A', service_path('a') %> <% s.action 'Service B', service_path('b') %> <% end %> <% end %>
Which will become this HTML:
<ul id='nav'> <li class='first current first_current'><a href="/">Home</a></li> <li class='last'><a href="/services">Services</a> <ul> <li><a href="/services/a">Service A</a></li> <li><a href="/services/b">Service B</a></li> </ul> </li> </ul>
UberKit is available both as a gem and a traditional plugin. For the gem version, add this to your
config.gem 'mbleigh-uberkit', :source => "http://gems.github.com/", :lib => "uberkit"
Or as a traditional plugin:
script/plugin install git://github.com/mbleigh/uberkit.git
Future of the UberKit
As always, the source is on GitHub and there is an Acts As Community Profile available as well. If you have any problems with it or would like to request new features, enter them on the Lighthouse project.