RAILS 3: nav_link helper for adding 'selected' class to navigation elements

README.markdown

UPDATE: It's a gem!

This helper has finally been moved into a gem called nav_lynx!

https://github.com/vigetlabs/nav_lynx

http://rubygems.org/gems/nav_lynx

Thanks to @brianjlandau and @reagent for getting that set up and tested!

Behold, the nav_link:

The nav_link helper works just like the standard Rails link_to helper, but adds a 'selected' class to your link (or its wrapper) if certain criteria are met. By default, if the link's destination url is the same url as the url of the current page, a default class of 'selected' is added to the link.

<%= nav_link 'My Page', my_path %>

When my_path is the same as the current page url, this outputs:

<a class="selected" href="http://example.com/page">My Page</a>

For more options and full usage details, see: http://viget.com/extend/rails-selected-nav-link-helper

Drop nav_link_helper.rb into app/helpers in your Rails 3.x app and enjoy.

UPDATE: Now with block support!

Same usage as link_to:

<%= nav_link 'http://example.com/page' do %>
  <strong>My Page</strong>
<% end %>

nav_link_helper.rb

module NavLinkHelper

  def nav_link(*args, &block)
    title = block_given? ? capture(&block) : args.shift
    path         = args[0]
    html_options = args[1] || {}
    options      = args[2] || {}

    LinkGenerator.new(request, title, path, html_options, options).to_html
  end

  class LinkGenerator
    include ActionView::Helpers::UrlHelper

    def initialize(request, title, path, html_options = {}, options = {})
      @request      = request
      @title        = title
      @path         = path
      @html_options = html_options
      @options      = options
    end

    def to_html
      html = link

      if @options[:wrapper]
        html = content_tag(@options[:wrapper], html, :class => wrapper_classes)
      end

      html.html_safe
    end

    private

    def current_path
      comparable_path_for(@request.fullpath)
    end

    def link_path
      comparable_path_for(url_for(@path))
    end

    def segment_position
      if @options[:controller_segment]
        @options[:controller_segment] - 1
      elsif @options[:url_segment]
        @options[:url_segment]
      end
    end

    def path_controller
      controller_for(@path)
    end

    def current_controller
      controller_for(@request.path)
    end

    def segment_for(controller, path)
      if @options[:controller_segment]
        controller.split('/')[segment_position]
      elsif @options[:url_segment]
        path.split('/')[segment_position]
      end
    end

    def path_segment
      segment_for(path_controller, current_path)
    end

    def current_segment
      segment_for(current_controller, link_path)
    end

    def paths_match?
      current_path == link_path
    end

    def segments_match?
      path_segment && path_segment == current_segment
    end

    def selected?
      paths_match? || segments_match?
    end

    def selected_class
      @options[:selected_class] || 'selected'
    end

    def link_classes
      if @html_options[:class]
        @html_options[:class] + " #{selected_class}"
      elsif !@options[:wrapper]
        selected_class
      end
    end

    def html_options
      selected? ? @html_options.merge(:class => link_classes) : @html_options
    end

    def link
      link_to(@title, @path, html_options)
    end

    def wrapper_classes
      if selected?
        "#{selected_class} #{@options[:wrapper_class]}"
      else
        @options[:wrapper_class]
      end
    end

    def controller_for(path)
      Rails.application.routes.recognize_path(path)[:controller]
    end

    def comparable_path_for(path)
      if @options[:ignore_params]
        path.gsub(/\?.*/, '')
      else
        path
      end
    end
  end

end

This is useful. I have a couple of suggestions, though:

First, please copy the usage instructions from
http://viget.com/extend/rails-selected-nav-link-helper to README.markdown. You
never know when and if the article will become unavailable for some reason, and
it's a good idea to keep everything to do with one gist in one place.

Second, it would be nice if one could also give an option for defining a class
name to be given for unselected links, in case the user wants to define
properties for such links in a .css file.

Third, I didn't really see the point of methods that are called from only one
place in the code -- I think they can confuse rather than clarifying the code,
so I merged the code of methods link_classes, html_options and link to method
LinkGenerator::to_html.

I also made a couple of changes to parameter and variable names, for better
self-documentation and more clarity. These are the resulting changes to the
code (tested to work):

  def to_html
-   html = link
-   if @options[:wrapper]
-      html = content_tag(@options[:wrapper], html, :class => wrapper_classes)
-   end
-   html.html_safe
+   linked_classes = nil
+   if @html_options[:class]
+     linked_classes = @html_options[:class] + " #{class_name_to_be_used}"
+   elsif !@options[:wrapper_class]
+     linked_classes = class_name_to_be_used
+   end
+   merged_html_options = @html_options.merge(class: linked_classes)
+   the_link = link_to(@title, @path, merged_html_options)
+   if @options[:wrapper_class]
+     the_link = content_tag(@options[:wrapper_class], the_link, :class => all_wrapper_classes)
+   end
+   the_link.html_safe
  end

- def link_classes
-   if @html_options[:class]
-     @html_options[:class] + " #{selected_class}"
-   elsif !@options[:wrapper]
-     selected_class
-   end
- end

- def html_options
-   selected? ? @html_options.merge(:class => link_classes) : @html_options
- end

- def link
-   link_to(@title, @path, html_options)
- end

+ def unselected_class
+   @options[:unselected_class] || ''
+ end

+ def class_name_to_be_used
+   name = selected? ? selected_class : unselected_class
+ end

- def wrapper_classes
-   if selected?
-     "#{selected_class} #{@options[:wrapper_class]}"
-   else
-     @options[:wrapper_class]
-   end

+ def all_wrapper_classes
+   "#{class_name_to_be_used} #{@options[:other_wrapper_classes]}"
+ end

And this is a usage example, from a .html.erb file:

<%= nav_link "Good stuff", good_stuff_path, {}, {selected_class: 'active', unselected_class: 'inactive', wrapper_class: 'li'} %>

Thanks for the feedback guys! All good stuff. I'll be moving this into a full repo soon for better collaboration.

I think it should be nav_link_to and please make it a gem.

I tried to used it with engine mounted, unfortunately it doesn't work in such case :(

+1 @greypants for accepting blocks!

Shorter version: https://gist.github.com/firedev/5308768

How can I make this work to ensure the when a user lands on the home-page the home tab is 'selected'?

Currently no tabs are selected when you land on the website.

Thanks.

It's been gemified at last!
https://github.com/vigetlabs/nav_lynx
http://rubygems.org/gems/nav_lynx

It seems to be running smoothly also on Rails 4, so maybe the Gem dependency could be updated.

And by the way, thanks for this! :-)

Just what I needed, and working great on Rails 4! In a similar fashion to how url_segment works, Is it possible to add the selected class to all pages under a sub-directory structure ?

For example: admin/products/item, admin/products/list etc.. Automatically adding the "selected" class to all urls within "/products" (within the same controller)