Rambling Labs Blog Ramblings on software development

  • Generating your site menu with the 'simple-navigation' gem

    One of the cool things I learned while building our new site was how to generate your site navigation menu without having to do the highlighting logic yourself.

    There's a great gem out there for this called simple-navigation, which you can find on GitHub.
    It's easy to set up and use, so you will probably do what you need to do really quick. To install, add it to your rails application Gemfile:

    gem 'simple-navigation'

    Then, run bundle install. After it's installed, generate the configuration file for it, which will be the config/navigation.rb, with the following:

    rails generate navigation_config

    Go ahead and open the config/navigation.rb file, and add your navigation items, which in my case is the following:

    SimpleNavigation::Configuration.run do |navigation|
      navigation.selected_class = 'current'
      navigation.items do |primary|
        primary.item :menu_home, 'Home', root_path
        primary.item :menu_about_us, 'About Us', about_us_path
        primary.item :menu_blog, 'Blog', posts_path
        primary.item :menu_contact_us, 'Contact Us', contact_us_path

    As you may have noticed, I don't have to specify when to be highlighted. This is because the gem assumes, by convention, that each navigation item will only be highlighted when its url matches the current url being accessed. Great! That's less navigation code for me to write.

    Ah, but wait, I want my blog navigation item to be highlighted whenever your accessing any url under /blog. Fair enough, simple-navigation supports a highlights_on option, which can be passed either a regular expression to match with the current url or a lambda that will determine if it's highlighted. I changed the blog navigation to this:

      navigation.items do |primary|
        # ...
        primary.item :menu_blog, 'Blog', posts_path, highlights_on: /\/blog/
        # ...

    Where they completely bought me in was with the navigation rendering. To render your navigation menu, just write this:

    <%= render_navigation %>

    And that's it!
    Awesome, right?

    In case you want to define navigation levels, just pass a block to the primary.item definition, like this:

      navigation.items do |primary|
        # ...
        primary.item :menu_blog, 'Blog', posts_path, highlights_on: /\/blog/ do |blog|
          blog.item :menu_popular, 'Popular', popular_posts_path
          blog.item :menu_recent, 'Recent', recent_posts_path
        # ...

    You can find more documentation on the simple navigation's wiki

    Enjoy! :)

  • blog comments powered by Disqus