Menumatic

Menumatic is a Rails 3 exclusive gem which aids in developing HTML navigation menus.

Please note menumatic is still in alpha however all the features mentioned in the readme should be working as expected - at the moment we're focussed on improving test coverage to bring us up to a proper, full release.

Philosophy

When designing Menumatic, I wanted a way in which I could remove navigation logic from the view all together, but also keep configuration to a bare minimum and (hopefully) stick to the principle of 'convention-over-configuration'.

Menumatic considers navigations to be more like models as opposed to views. As such, navigations are defined in the app/navigation directory, and rendered in the view with a simple helper method.

Getting Started

Include the gem in your Gemfile like so:

gem 'menumatic'

Then update your bundle:

$ bundle

You can then get started by generating a new navigation:

$ rails g menumatic:navigation

This will create the file app/navigation/application_navigation.rb which you can use to define the structure of your navigation items.

If you want to use the bundled stylesheet (nothing fancy, but quite serviceable - enough to get you up and running), add the following to your layout:

<%= stylesheet_link_tag "application_navigation" %>

Using Menumatic

Navigations are stored in app/navigation. The default navigation is given a name of 'application', however you can specify the name in the generator:

$ rails g menumatic:navigation application

Which will generate a navigation called app/navigation/application_navigation.rb and the basic stylesheet.

Inside your navigation file, you can then define the structure of your navigation, here is an example taken from the Menumatic example application:

navigate_to "Home", home_path, :active_on => [home_path, root_path]
navigate_to "About", about_path
navigate_to "Store", store_on_special_path do |store|
  store.navigate_to "On special", store_on_special_path
  store.navigate_to "Coming soon", store_coming_soon_path
  store.navigate_to "Categories", store_categories_path do |categories|
    categories.navigate_to "Shirts", store_categories_shirts_path
    categories.navigate_to "Pants", store_categories_pants_path
    categories.navigate_to "Hats", store_categories_hats_path
    categories.navigate_to "Accessories", store_categories_accessories_path
    categories.navigate_to "Sporks", store_categories_sporks_path
  end
end
navigate_to "Contact us", contact_us_path
navigate_to "Admin", admin_path if current_user.is_admin?

When creating your navigation you effectively have two methods at your disposal: navigate_to and group

navigate_to creates a navigation item in your menu, and works very similar to Rails' built-in link_to helper. It also accepts a few other options, which are listed below.

To display your navigation in your view, simply use the menumatic helper:

# app/views/layouts/application.html.erb
<!-- snip -->
<header>
  <nav>
   <%= render :navigation => 'application' %>
  </nav>
</header>

Which will give you a full-semantic, auto-highlighted navigation.

Rendering specific navigation levels

By default, Menumatic displays your navigation as a set of nested unordered lists. However, if you need to break up your layout, this is easily achiveable:

# app/views/layouts/application.html.erb
<!-- snip -->
<header>
  <nav>
   <%= render :navigation => 'application', :level => :primary %>
  </nav>
</header>

<div class="sub_navigation">
  <%= render :navigation => application, :levels => [:secondary, :tertiary] %>
</div>

The above example would render the top-level navigation in the <header> and everything else in the sub_navigation div below.

Note: numbers are also acceptable parameters here, where 1 is the primary level.

Sitemap generation

Menumatic can also optionally generate a sitemap.xml. To include a

sitemap in your site, simply add this line to your config/routes.rb

sitemap_for :application # or the name of your navigation

Todo

I have some big ideas for Menumatic, but there should be enough functionality in there to service the vast majority of web apps. If you have any feature requests or questions, feel free to open an issue - I'd love to get some feedback!

This is what I have planned for some future releases:

  • Better test coverage
  • More configuration options

Credits

I'd like to thank Jordan Lewis for his CSS styling skills.