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 ;)

{lang: 'it'}


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.

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


  • Commento di

    This article is truly a good one it assists new web users, who are
    wishing for blogging.

  • Commento di

    It is not my first time to pay a quick visit this
    site, i am browsing this website dailly and take nice facts from here every day.

  • Commento di

    Our main focus at MN sports training journal is the athlete.
    The sports training journal Academy offers a wide range of
    sports training journal in the areas of
    hockey, baseball, golf, gymnastics and overall sports performance training.
    The core supports the movements of the arms and legs
    and the mobility of the lower body as well as during our training.
    Yes, there is a specific mode of schedule that is to be
    followed for becoming sportsmen in the true sense of the term.
    By interacting with the others through individual and team sports, they
    are only one dimensional.

    My web page: diet for hockey players

  • Commento di

    It’s awesome to pay a quick visit this web site and reading the views of all mates about this piece of writing, while I am also zealous of getting know-how.

  • Either they can’t afford the premiums for the same patient.
    Tom Billet, a senior policy analyst at Community Catalyst,
    a consumer group that specializes in health issues, said it
    appeared that about 18 states would choose to health insurance run their own PCIPs.
    But Obama’s people may have known that a significant majority of Americans get
    health plans, but most people who are under-insured”. Its urban heartbeat, Akron, has produced the black poet laureate of the United States and Canada, overweight or obese adults.

  • Commento di

    Seriously, wonderful weblog arrangement! Precisely how lengthy are you currently blogging pertaining to? you’re making posting appearance easy. The entire glance of your website is a plus, not to necessary . fabric!

  • Commento di

    What i don’t understood is in fact how you’re no longer actually a lot more well-appreciated than you may be right now.
    You’re very intelligent. You already know therefore significantly in the
    case of this topic, produced me personally believe it from so many varied angles.
    Its like men and women aren’t interested unless it is something to accomplish with Lady gaga!
    Your personal stuffs great. Always handle it up!

  • This ‘energу’ Phеntermine users miss is actually thee result οf the drug
    being a member of the amphetаmine ‘ or crystal meth ‘ family,
    with similar aԁdictive effеcts. In such case, takе one in early morning and another supplement 4-5 hours bеfore you sleep.
    It іs pοssible, howеver, that Adipex-P causes dry mouth or
    ccotton mouth simply becauѕe it iѕ an anorectic.

    Check out mу blog; adipex coupons – only at BuyPhentermine 37.5mg .biz

  • Commento di

    Тhese are really great ideas in about blogging. You hhave touched some nice factors here.
    Any way keep upp wrinting.

    my blog post humor

  • Commento di

    The reason why deleting record a way to remove porn from Our Mac?
    Becoming caught is just not which is healthy to improve your
    current 201 record. Another is the fact that downloading volumes of porn motion
    pictures at work can certainly slow down the net connection from true jet-speeds
    to seeing that slow like a running turtle with osteo-arthritis.

    That will a person increase your provider’s operation cost
    with all the unproductive hours you’re going for, in addition, you increase the network’s possibility
    of benefiting from deadly infections that are today possible to compromise Apple computers.

    My weblog: Bangbros Password

  • Commento di

    A fascinating discussion is definitely worth comment.
    I think that you should publish more on this
    topic, it might not be a taboo matter but usually folks don’t talk about
    such subjects. To the next! Kind regards!!

  • Commento di

    Unfortunately, the same features that help you save money
    mold 2012 can also promote mold growth. Mold testing should be
    done to professionally and safely correct the mold problem
    in your home or property in Chicago along with one of them is flooding.
    Chlorine bleach can be used in expandable mildew casting, which produces particularly high-qualityproducts of all sorts of problems
    that don’t seem connected to mold exposure can be different to
    someone else’s. Mildew has a stain-like appearance and is commonly found
    in places where there is moisture.

  • Commento di

    Simply want to say your article is as surprising. The clarity
    in your publish is simply great and that i could think you’re
    knowledgeable on this subject. Fine with your permission allow me
    to grab your feed to keep updated with approaching post.
    Thank you one million and please continue the rewarding work.

    Also visit my page limited liability company liability (Christiane)

  • Commento di

    What’s up, after reading this awesome post i am too delighted to share
    my familiarity here with mates.

  • Commento di

    It truly is great time for you to make some plans money for hard times which is time for you to smile. I find out this particular blog post and when I could I prefer to help you a few attention-grabbing problems or suggestions. You may might generate pursuing content articles with this content. My spouse and i would like to examine all the more challenges around the item!

  • Commento di

    Thank you for every other informative website. Where else
    may I am getting that kind of info written in such a perfect approach?
    I have a project that I’m simply now working on, and I’ve been at the glance out for such information.

    Here is my web site :: Ios


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>

*