What is the best approach of dealing with class="active" problems in Rails?
I've found how to deal with this for single links, but when classes has to be set to "active" in different parts of the template, how do one deal with this?
Here is my code:
module AdminHelper
def nav_link(link_text, link_path)
class_name = current_page?(link_path) ? 'active' : nil
content_tag(:li) do
link_to link_text, link_path, :class => class_name
end
end
def active_section(section)
request.fullpath.start_with?(section)
end
end
And in the layout holding the menu:
<% if active_section('/superadmin') %>
<li class="active">
<% else %>
<li>
<% end %>
<i class="fa fa-asterisk fa-fw"></i> Superadmin <span class="fa arrow"></span>
<ul class="nav nav-second-level">
<%= nav_link 'Add Account', superadmin_new_account_path %>
<%= nav_link 'List Accounts', superadmin_list_accounts_path %>
</ul>
</li>
That is, I need to check if I am at a specific part of the url structure, and outputting the li class="active" in case of that. Otherwise just outputting the li element without class. I am using a menu; MetisMenu and needs to set this class so correct section is expanded.
My code works but it feels horrible wrong way to do it.
Would be really happy if someone can give a hint on how to do this the right way!
I recommend using simple-navigation gem
Not to be 'that guy', but have you looked into HAML? It makes doing conditional classing a ton easier. It also reads/looks much cleaner. i.e.
%li{:class => ("active" if active_section('/superadmin'))}
Related
in the bootstrap navigation bar. You can get the effect of a button being clicked by adding the class active . Naturally, I want to use this on my pages. For example if I'm on the about us page I want the about us button clicked.
What is the best way to go about this? I was going to go to each page and at the bottom have a jQuery function add the class active to it. Is there a better way?
Read about current_page? here
You can add a method for handle logic with current_page?, example a method :
module ApplicationHelper
def active_class(link_path)
current_page?(link_path) ? "active" : ""
end
end
example bootstrap navbar template
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
So, on view looks like
HTML
<li class="<%= active_class(some_path) %>">
<%= link_to "text of link", some_path %>
</li>
HAML
%li{:class => active_class(some_path)}
= link_to "text of link", some_path
Or you can use request.fullpath to get current full of path if a current path have a parameter
example
<ul>
<% Contry.all.each do |c| %>
<li class="snavitem <%= active_class(contry_path(c)) %>">
<%= link_to "show #{c.name}", contry_path(c) %>
</li>
<% end %>
</ul>
and on your application_helper.rb
def active_class(link_path)
request.fullpath == link_path ? "active" : ""
end
read about request.fullpath here
in my opinion, a cleaner way to achieve that is to write a link_to_in_li method in application_helper.rb:
def link_to_in_li(body, url, html_options = {})
active = "active" if current_page?(url)
content_tag :li, class: active do
link_to body, url, html_options
end
end
then use it this way
<%= link_to_in_li "Home", root_path, id: "home_link" %>
I find the code inside li a little difficult to read.
For anyone having trouble making sense of this, here is an example with my paths and filenames laid out explicitly. As a pretty new person to rails, I was having trouble figuring it out. Thanks to the other people who answered above, as it helped me figure it out!
I placed the Bootstrap navbar in my application.html.erb file:
<div class="navbar-header">
<a class="navbar-brand" href="/">Mapper</a>
<ul class="nav navbar-nav">
<li class="<%= is_active?('/') %>"><%= link_to "Home", '/' %></li>
<li class="<%= is_active?('/main/map') %>"><%= link_to "Map", '/main/map' %></li>
<li class="<%= is_active?('/main/about') %>"><%= link_to "About", '/main/about' %></li>
</ul>
</div>
This goes in the application_helper.rb file:
module ApplicationHelper
def is_active?(link_path)
current_page?(link_path) ? "active" : ""
end
end
That's it! Now your application will dynamically add the 'active' class to whatever page is currently being viewed (i.e. it's corresponding list item in the navbar). This is much simpler (and more DRY) than adding the navbar manually to each page (view) and then updating the 'active' class.
I'll post my answer that I created based on these others because in case of CRUD views the active class wasn't been placed.
module ApplicationHelper
def active_class(name)
controller_name.eql?(name) || current_page?(name) ? 'active' : ''
end
end
My views use something like this:
<ul class="nav navbar-nav">
<li class="nav-item <%= active_class('/') %>">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item <%= active_class('leads') %>">
<a class="nav-link" href="/leads">Leads</a>
</li>
</ul>
<ul class="nav navbar-nav pull-right <%= active_class(edit_user_registration_path) %>">
<li class="nav-item ">
<a class="nav-link" href="/users/edit">Perfil</a>
</li>
<li class="nav-item">
<%= link_to('Sair', destroy_user_session_path, method: :delete) %>
</li>
</ul>
Please try this in each page, check the cotroller or action and add the css
For example:
<li class= <%= (controller.controller_name.eql?('pages') && controller.action_name.eql?('index') )? 'active':''%> ><%= link_to 'my page', pages_path%></li>
You may define a helper method in application_helper.rb
def create_link(text, path)
class_name = current_page?(path) ? 'active' : ''
content_tag(:li, class: class_name) do
link_to text, path
end
end
Now you can use like:
create_link 'xyz', any_path which would render as <li class="active">xyz</li>
Perfect for bootstrap navigation!
Why limit yourself to only li elements? And why not support multiple class names along with active? This solution lets me:
Support not only plain text but HTML inside link_to (e.g. add an icon inside the link)
Add just few lines of code to application_helper.rb
Append active to the whole class name of the link element instead of it being the sole class.
So, add this to application_helper.rb:
def active_class?(class_name = nil, path)
class_name ||= ""
class_name += " active" if current_page?(path)
class_name.strip!
return class_name
end
And on your template you can have something like this:
<div class="col-xs-3">
<%= link_to root_path, :class => active_class?("btn btn-outline-primary", root_path) do %>
<i class="fa fa-list-alt fa-fw"></i>
<% end %>
</div>
You can also specify or not a class_name and use it like this:
<li class="<%= active_class?(root_path) %>">Home</li>
Thanks to previous answers 1, 2 and resources.
This is what I have and I want to include it in a partial so that I am not duplicating it in 4 places. The problem is the active class which should change based on the page the user is on. How can I go about this? Or am I better off just repeating the code in 4 templates?
<div class="navbox">
<ul class="nav">
Account</li>
<li> Profile</li>
<li> Photos</li>
<li> Security</li>
</ul>
</div>
Pass in an active local when rendering:
render :partial => 'navbox', :locals => { :active => 'Account' }
Then have this as your partial:
<div class="navbox">
<ul class="nav">
<a href="#"<% if active == 'Account' %> class="active"<% end %>> Account</li></a>
<a href="#"<% if active == 'Profile' %> class="active"<% end %>><li> Profile</li></a>
<a href="#"<% if active == 'Photos' %> class="active"<% end %>><li> Photos</li></a>
<a href="#"<% if active == 'Security' %> class="active"<% end %>><li> Security</li></a>
</ul>
</div>
There's various ways this could be cleaned-up (link_to, helper methods, etc.), which is left as an exercise. You could also potentially avoid needing to pass in a local if you can deduce whether something is “active” from the request URL.
Also have a look at link_to_unless_current & link_to_unless if you don't want to link at all instead of adding a class to the link.
Look for the active_link_to gem https://github.com/twg/active_link_to
It is the easiest way
You can try to crete helper like this:
{'Account' => account_path, 'Profile' => profile_path...etc}.each do |name, path|
content_tag :li do
link_to name, path, class: (current_page?(path) 'active' : 'regular')
end
end
Also take a look at method link_to_unless_current http://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to_unless_current
I am trying to use a basic current_page method to define whether a navigation link should be highlighted as the current page or not.
I am not receiving any errors at the moment but am clearly not defining things properly as it's not using my CSS correctly.
In my PagesController I have the following:
def current_page
current_page = (path)
end
and I am using an if and else statement on my pages view to try and define which CSS line to use which looks like this:
<div id="nav">
<ul>
<li>
<% if "current_page" %>
About
<% else %>
About
<% end %>
</li>
</ul>
</div>
I have read quite a few forums on this but still can't seem to get it right.
Mhh you got an error in your code. With if "current_page" you will get always true, and only the first link will get rendered. You should use if current_page instead.
But rails has a build in helper, called current_page? for exactly this purpose:
Just do it like this:
<% if current_page?(path) %>
About
<% else %>
About
<% end %>
See here for more information on current_page?
The klump's answer follows your requirement, but I dare to propose a different approach:
<div id="nav">
<ul>
<li>
<%= link_to_unless_current 'About', about_path %>
</li>
</ul>
</div>
This way your About will appear as a text if current page is about_path and as a link on any other.
About
I am trying to set an li class of active based on what page the user is on.
I have 4 navigation elements and they all look something like this:
<% if #activeLi == "home" %>
<li class="active">
<% else %>
<li>
<% end %>
<%= link_to :controller => "home" do %>
<span>Home</span>
<% end %>
</li>
and then in each controller I just set #activeLi like this:
def index
#activeLi = "about"
end
I know this is pretty basic stuff, but i'm just wondering if there is an easier way to do this?
Well I know one way you can simplify this and thats by getting rid of the need to use those nasty instance variables.
<li class="<%= controller_name == "home" ? 'active': '' %>">
<%= link_to :controller => "home" do %>
<span>Home</span>
<% end %>
</li>
I have a rails app using a ul as a toolbar. I want to have a style (selected) to apply to the page the user is on.
How can I do that?
This is what I have so far, but the selected style is hard coded and I'm also not sure how to know what page is selected.
<ul>
<li class="firstItem"><%= link_to "About", '/about' %></li>
<li class="item"><%= link_to "Page1", '/page1' %></li>
<li class="item selected" <%= link_to "Page2", '/page2' %></li>
<li class="item"><%= link_to "Contact", '/contact' %></li>
<li class="lastItem"><%= link_to "Blog", '/blog' %></li>
</ul>
I agree totally with Jarrod's advice, but just in case you encounter the need to process additional conditions (and want to avoid ugly embedded ruby in your HTML code), take a look at Rails' content_tag method.
With it, you can replace something like:
<li class=<%= #post.active? ? 'active' : 'suspended' %>>
<%= link_to #post.name, post_path(#post) %>
</li>
With something like:
<%= content_tag :li, link_to(#post.name, post_path(#post), :class => #post.active? ? 'active' : 'suspended' %>
And of course, sticking this code into a helper and calling it from there will earn you more elegance-points.
Hope this helps.
PS: This is my first post on Stackoverflow, please be gentle. :)
if each li is linked to different controller you can use controller_name to add or not the selected class
Here is an example from my app, it's in haml
%ul
%li
%a{:href => '/kebabs', :class => ('current' if controller_name == 'kebabs')} Admin kebabs
%li
%a{:href => '/statistics', :class => ('current' if controller_name == 'statistics')} Statistiques
%li
%a{:href => '/people', :class => ('current' if controller_name == 'people')} Admin Personnes
cheers
You can also use css for this. Give each the body each page a class and id from your controller and action names.
<body class="<%= controller.controller_name %>" id="<%= controller.action_name %>">
Then give your ul and li elements an id.
<ul id="nav'>
<li id="about"></li>
<li id="contact"></li>
<li id="blog"></li>
</ul>
Now you can reference a specific link on a specific page from your stylesheet.
body.blog#index ul#nav a#blog:link
So if you want to make section links 'sticky' you can reference them all at once, leaving out the body id.
body.blog ul#nav a#blog:link,
body.contact ul#nav a#contact:link {
background-color: red;
}
Check out more on CSS selectors.