「active_link_to」で表示中のページのリンクへ動的にclassを付与する方法

【結論】

・active_link_toとは、Railsのgemの一種。link_toと同じように、リンクを生成する「active_link_to」メソッドを利用できるようになる

・「active_link_to」メソッドは、リンク先のページを開いていると、リンクに「class=“active”」を付与する

・サイドバーをハイライトさせたり、リンクを無効化させる際に利用できる

【目次】

【本題】

サイドバーなどを制作する際、リンク先のページを開いている際には、該当リンクの背景色などを濃くしたりして、強調したい場合があります。

※参考例(Qiita)

Qiitaの場合、どの様にこれを実装しているのかデベロッパーツールで確認してみると、該当リンクに「p-home_menuItem-active」というクラスを付与している様です。

この様に動的にclassを付与したい場合、Railsでは「active_link_to」というgemを利用する方法があります。

「active_link_to」とは、Railsのgemの一種です。

これを導入すると、link_toと同じように、リンクを生成する「active_link_to」メソッドを利用できるようになります。

「active_link_to」メソッドでリンクを生成すると、リンク先を開いている時は、そのリンクに「class=“active”」を付与する事ができます。

後は、この「class=“active”」に対して、CSSを設定することで、リンクをハイライトさせたり、無効化させたりする事が可能となります。

実装方法

まずはgemを導入します。

gem 'active_link_to'

後は、link_toと同じ要領で、「active_link_to」を利用するだけで、動的にactiveクラスを付与できるリンクが生成されます。

active_link_to 'Users', '/users'
# => <a href="/users" class="active">Users</a>

参考情報

GitHub - comfy/active_link_to: Rails view helper to manage "active" state of a link