DEV Community

loading...
Cover image for Highlight link to current page: TLDR

Highlight link to current page: TLDR

yarotheslav profile image Yaroslav Shmarov Originally published at blog.corsego.com Updated on ・1 min read

Often to improve your navigation UI (user experience), you will want to mark the link to current page "active".

The simple way to do it (assuming a bootstrap navbar):

<li class="<%= 'active font-weight-bold' if current_page?(root_path) %> nav-item">
  <%= link_to "Homepage", root_path, class: 'nav-link' %>   
</li>
Enter fullscreen mode Exit fullscreen mode

or if you want to add some fancy fontawesome:

<li class="<%= 'active font-weight-bold' if current_page?(root_path) %> nav-item">
  <%= link_to root_path, class: 'nav-link' do %>
    <i class="fa fa-home"></i>
    Homepage
  <% end %>
</li>
Enter fullscreen mode Exit fullscreen mode

however when you have a lot of links, your code will look "dirty".

To make it look cleaner, you can add the following lines to application_helper.rb:

def active_link_to(name, path)
    content_tag(:li, class: "#{'active font-weight-bold' if current_page?(path)} nav-item") do
      link_to name, path, class: "nav-link"
    end
  end 
end 

def deep_active_link_to(path)
  content_tag(:li, class: "#{'active font-weight-bold' if current_page?(path)} nav-item") do
    link_to path, class: "nav-link" do
      yield
    end
  end 
end 
Enter fullscreen mode Exit fullscreen mode

this way you can write links like this

<%= active_link_to "homepage" root_path %>
Enter fullscreen mode Exit fullscreen mode

or

<%= deep_active_link_to root_path do %>
  <i class="fa fa-home"></i>
  Homepage 
<% end %>
Enter fullscreen mode Exit fullscreen mode

That's it!🤠

Liked this article? Please follow me! It will really motivate me to post more fun stuff!

Discussion (0)

pic
Editor guide