Menus in Rails with simple-navigation and Bootstrap

Problem

Almost every application needs a menu (at least one). For simple menus it could be tempting the idea to write our menu helpers but if we have more than one menu or our menu is complex we could prefer to use something ready and well tested.

Additional problem

If we want to use the Twitter’s Bootstrap framework write the right markup with the right classes could be boring (and we know Rails programming is all about fun, right?)

Bootstrap dropdown menu

Solution

simple-navigation is a gem that gives us a simple DSL (Domain Specific Language) to define menus and an helper to render these menus in views.
Every menu is defined in a single file (DRY!) and with the simple-navigation-bootstrap gem we can even generate the markup for Bootstrap menus easily.

Installation

First of all we need to install the simple-navigation and simple-navigation-bootstrap gems (I’m assuming your application already loads the Bootstrap’s stylesheets and javascripts, if you don’t use bootstrap just install the simple-navigation gem).

Add the following line to your Gemfile:

# Gemfile
gem 'simple-navigation'
gem 'simple-navigation-bootstrap'

and install them:

$bundle install

Once installed you can run the generator to generate the default menu configuration:

$bundle exec rails g navigation_config

At this point restart your rails server if it’s running.

Menu configuration

Well, the generator write a navigation.rb file in your config directory, this is the file where all the magic happens.

The file is well documented but I suggest you to have a look at the simple-navigation wiki for more information.

SimpleNavigation::Configuration.run do |navigation|
  # Use Bootstrap renderer provided by the
  # simple-navigation-bootstrap gem
  navigation.renderer = SimpleNavigation::Renderer::Bootstrap
  # Item keys end up to be list items' IDs.
  # This setting avoids it
  navigation.autogenerate_item_ids = false

First of all we say to simple-navigation to use the Bootstrap renderer. A renderer is a class that build the HTML markup for us, in this case generate the markup needed by Bootstrap (You can remove this line if you don’t use Bootstrap).

The second thing I do here is to leave off the IDs from the menu markup because I don’t use them.

Now inside this block we can use the navigation variable to actually add navigation items to the menu:

# Define the primary navigation
navigation.items do |primary|
  # Bootstrap classes for tabbed menu
  primary.dom_class = "nav nav-tabs"
  primary.item :key_products, 'Products',
                              products_path,
                              :if => lambda { can? :index, Product }
  # User menu
  primary.item :key_1, 'User', '#' do |sub_nav|
    sub_nav.item :key_1_1, 'Profile', user_profile_path
    sub_nav.item :key_1_2, 'Logout', logout_path
  end
end

As you can see in the items block we first add some class to the navigation element (these are Bootstrap’s classes) and then add some menu item, in this case a “Products” item and a “User” item.
There are at least 3 interesting things to note here:

  1. In the “User” item we pass a block and define menu items inside the “User” second-level navigation.
  2. We pass a lambda to the :if option of the “Products” menu item. The menu item will be added only if the result is true, in this case I’m using the can? helper provided by the CanCan gem. Yes you have access to all your beloved helpers here ;)
  3. The Bootstrap renderer will add the right classes and markup for us.

At this point I’m sure you’re wondering how you can actually show the menu.

Show the menu

To show the menu you need to add a call to the render_navigation helper method provided by the simple-navigation gem.

For example a good place where to render your menu is in the layout:

<%= render_navigation(:expand_all => true) %>

The :expand_all option say to simple-navigation to put the submenu’s items even if not actives (without this option you’ll end up with empty submenus)

More than one menu?

As I said, simple navigation allow you to define more than one navigation, for example an administration menu to show only in a certain area of your application.

What you have to do is just create another file under /config, say config/another_navigation.rb, define your navigation there and then in your view add the following line:

<%= render_navigation(:context => :another, :expand_all => false) %>

Here you specify the context option which is the part before the “_navigation.rb” in the name of the menu configuration.

Conclusion

How we’ve seen add a navigation to our Rails application is not so hard, we don’t need to reinvent the wheel and write lines and lines of HTML markup paying attention to not forget some class in the process.

For more information you can read the good gems’ documentation but at this point you should be able to add (in few minutes) a navigation to your Rails application ;)


Puoi seguire le risposte a questo articolo tramite il feed RSS 2.0.
Puoi anche lasciare un commento, o creare un trackback dal tuo sito.

10 Risposte a “Menus in Rails with simple-navigation and Bootstrap”


  • Commento di

    Hello Your entire website starts up really slow if you ask me,
    I am not sure who’s issue is that however flickr starts up extremely
    immediate. Anyways, Let me thank you very much for including
    brilliant article. Everybody who found this great
    site really should have discovered this particular article
    extremely helpful. I have to say that you have done fantastic
    job with this as well as expect to find even more brilliant content through you.
    To obtain additional information through articles you publish, I actually have book marked this site.

  • Commento di

    I just couldn’t depart your site before suggesting that
    I actually loved the standard information an individual supply on your guests?
    Is going to be again frequently in order to investigate cross-check new posts

  • Commento di

    It’s great that you are getting thoughts from this piece of writing as well as from our discussion made at this place.

  • whoah this blog is magnificent i love studying your posts.
    Keep up the good work! You already know, lots of persons are searching around for this info, you can aid them greatly.

  • Commento di

    We caan look for, and discover, anyy information in just seconds, we are able to interact with our budies and distant acquaintances on the
    quantity of soccial network sites, we can broadcast our feeling towards the whole
    world, and we aree able to invite these to read orr view our
    opinions (and obtain purchased it for). This is something which
    social media can certainly afford a small business.
    Business people employ this space to promoting their products
    and services.

  • Commento di

    While free accounts cannot schedule updates lazrge quantities, you can still schedule as numerous updates as you wish
    individually. With inflation checking out the roof, and also the prices of all things sky-rocketing, it is
    no wonder that folks are struggling to make ends meet.
    Those who have not tried the brand new entrants need to use them,
    thus raising the sales.

  • Commento di

    We can seek out, iin order to find, any information within seconds, we
    could talk with our good friends and disstant acquaintances on a amount of social networks,
    we aree able to broadcast our feelinhg to the whole world, and we can essily invite the crooks to rewd or view our opinions
    (and get acquired it for). Search engines made everything the more easier
    for those to discover business, however it is necessary ffor businesses to
    being visible during these spaces in order that to draw
    in potential customers. These companies use Twitter advertising in promoting your
    products, services, messages and website this in turn makes sure that both your revenue
    and recognition are increased, thus ultimately causing further expansion for both you and also the company you use.

  • Free Instagram followers no verification

    Menus in Rails with simple-navigation and Bootstrap // xoen-

  • We can hunt for, and locate, any information in a matter of seconds, we are able
    to connedct to our good friends and diustant acquaintances with a variety of
    sodial network sites, we can broadcast our feeling towards the whole world,
    and we can easily invite these phones read or view our opinions (and
    acquire purchased it for). This is something social media marketing can easily afford
    a little business. It is important to take poper precautions to safeguard your privacy on Facebook and make
    your profile secured.

  • Commento di

    While free accounts cannot schedule updates in large quantities, it is
    possible to still schedule as numerous updawtes as you desire
    individually. Target the Right Audience- According to your needs target
    relevcant age brackets and demographics, and emppoy that language or just English.
    Clean drinking water gained another spot, buyiing a fridge the fourth while
    NHS bagged the sixth spot.


Lascia un commento

XHTML: Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*