Navbar-Highlighter

Navbar highlighter provides an easier way to activate link based on controller and action used by rails.

Usecase: You want to activate certain links when user is hits static controller's index action. you just need to add data-controller='controller_name' and data-action='action_name' in order to add specified class to it when user hits this controller's action.

Add navbar_highlighter to Gemfile and bundle install

gem 'navbar_highlighter'

Add the following to your app/assets/javascripts/application.js:

//= require navbar_highlighter

Now, Initialize navbar highlighter using following code, this can be done in a separate js file. for example: navbar_highlighter_init.js

If you are doing so, don't forget to add it to asset.rb like so: Rails.application.config.assets.precompile += %w( navbar_highlighter_init.js )

(function(){
  var data = {
    // navbar you want to use.
    navBar: $('[data-navbar=highlight]'),

    // navbar links class selector
    linkSelectorClass: 'primary-link',

    // name of the class you want to add to activate a link
    classNameToAdd: 'active-link'
  },

  linkHighlighter = new NavbarHighlighter(data);
  linkHighlighter.init();

})();

Add<%= navbar_highlighter_tags %> to any layout that you are using.

<nav data-navbar="highlight">
  <ul class="primary-nav-list">
    <li class="primary-menu">
      <a href="/" class="primary-link" data-controller="sessions" data-action="index">
        Home
      </a>
    </li>

    <li class="primary-menu">
      <a href="/users" class="primary-link" data-controller="users" data-action="index" data-parent='sessions'>
      <!-- Adding data-parent='controller_name' will add active-link class to parent link i.e Home link in this case. -->
      Users
      </a>
    </li>
    <ul>
</nav>

Note:

As user hits sessions_controller index action Home link will be active, and when user clicks Users link Users link will be get active-link class.

Bug reports and pull requests are welcome on GitHub at https://github.com/abhikanojia/navbar_highlighter. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

The gem is available as open source under the terms of the MIT License.

Everyone interacting in the NavbarHighlighter project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.