1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Railsでタブやナビゲーションをカレント表示する方法

Last updated at Posted at 2020-03-16

Rails管理画面アプリのナビゲーションを作成するにあたって、
現在ページのカレント表示のやり方で簡単な方法が分かったので紹介します。

例)トップページの場合

まずはトップページを例とします。
トップページへのヘルパーメソッドはadmin_path``(/admin)とします。

_navbar.html.erb
<ul class="nav">
  <li class="nav-link <%= 'active' if request.path == admin_path %>"><a href="<%= admin_path %>">トップページ</a></li> #ここの行に注目
  <li class="nav-link"><a href="#">リンク1</a></li>
  <li class="nav-link"><a href="#">リンク2</a></li>
</ul>

解説

request.pathで現在のパスがわかるので、これとadmin_pathのヘルパーメソッドを比較し、
trueだった場合はactiveのクラスを付与するようにしています。
(if request.path == admin_path の箇所)

例)トップページ以外の場合

次はトップページ以外を例とします。
前提としてroutes.rbにはadmin_usersresourcesとして設定していること。
トップページ以外へのヘルパーメソッドの例はadmin_users_path``(/admin_users)とします。

routes.rb
Rails.application.routes.draw do
  resources :admin_users
end
_navbar.html.erb
<ul class="nav">
  <li class="nav-link <%= 'active' if request.path == admin_path %>"><a href="<%= admin_path %>">トップページ</a></li>
  <li class="nav-link <%= 'active' if request.path.starts_with?(admin_users_path) %>"><a href="<%= admin_users_path %>">ユーザー一覧</a></li> #ここの行に注目
  <li class="nav-link"><a href="#">リンク2</a></li>
</ul>

解説

request.pathで現在のパスがわかるので、これとadmin_users_pathのヘルパーメソッドをstarts_with?メソッドで先頭の文字列をチェックし、
trueだった場合はactiveのクラスを付与するようにしています。
(if request.path.starts_with?(admin_users_path) の箇所)

参考にさせていただいたURL

Rails4・Rails5 で現在のURLを取得する。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?