elegant way to add css class in rails partials

Question

I have partials which display in sidebar like below

__side_bar_partials.html.erb

<div class="col-sm-3">
  <div class="account-left">              
    <ul>
      <li class="active"><a href="menu1">Menu1</a></li>
      <li><a href="menu2">Menu2</a></li>
      <li><a href="menu3">Menu3</a></li>
      <li><a href="menu4">Menu4</a></li>
      <li><a href="menu5">Menu5</a></li>
    </ul>
  </div>
</div>

now what i need when i render this partial i want to add css class active added on selected menu

right now i render it with normal way

 <%= render "profile_sidebar"%>

what i need to include in above code so it will add active class on selected menu

score 2 · Accepted Answer · edited May 23 '17 at 12:14

Basically you have 2 choices. First one is to check the current page and highlight the right menu choice.

<div class="col-sm-3">
  <div class="account-left">              
    <ul>
      <li class="<%= 'active' if current_page?(menu1_path) %>"><a href="menu1">Menu1</a></li>
      <li class="<%= 'active' if current_page?(menu2_path) %>">><a href="menu2">Menu2</a></li>
      <li class="<%= 'active' if current_page?(menu3_path) %>">><a href="menu3">Menu3</a></li>
      <li class="<%= 'active' if current_page?(menu4_path) %>">><a href="menu4">Menu4</a></li>
      <li class="<%= 'active' if current_page?(menu5_path) %>">><a href="menu5">Menu5</a></li>
    </ul>
  </div>
</div>

But since you are looking for more elegant way, I would suggest second choice: doing a separate helper for your list elements. The solution with helper is perfectly described here.

Hope it helps.

thanks for response but i dont want to use `if` condition in every li — uzaif, Aug 05 '16 at 11:05
@uzaif that's exactly why I provided a second way ;) the one with the link `here` — Yaro, Aug 05 '16 at 11:05

elegant way to add css class in rails partials

1 Answers1