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>
The 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>Installation
UberKit is available both as a gem and a traditional plugin. For the gem version, add this to your environment.rb:
config.gem 'mbleigh-uberkit', :source => "http://gems.github.com/", :lib => "uberkit"
Or as a traditional plugin:
script/plugin install git://github.com/mbleigh/uberkit.gitFuture of the UberKit
While UberMenu is a useful tool, the UberKit will continue to grow over time, so stay tuned for additions (next on the slate: UberForm). It may also grow to include some common styles and javascripts that can be used in conjunction with the helpers to provide an even easier track to a full-fledged UI.
Resources
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.
