-
ルートベースのアクティブクラス: Laravelでは、ルート名に基づいてアクティブなリンクを判別することができます。まず、ルートファイル(通常は
routes/web.php
)で各ルートに名前を付けます。Route::get('/', function () { return view('home')->name('home'); }); Route::get('/about', function () { return view('about')->name('about'); });
ビューファイルでアクティブなリンクに
routeIs
メソッドを使用し、アクティブな場合にCSSクラスを追加します。<a href="{{ route('home') }}" class="{{ request()->routeIs('home') ? 'active' : '' }}">Home</a> <a href="{{ route('about') }}" class="{{ request()->routeIs('about') ? 'active' : '' }}">About</a>
上記の例では、現在のリクエストが指定したルートに一致する場合に、
active
クラスが追加されます。 -
URLベースのアクティブクラス: ルート名ではなく、URLパスに基づいてアクティブなリンクを判別することもできます。以下はその方法です。
<a href="/" class="{{ request()->is('/') ? 'active' : '' }}">Home</a> <a href="/about" class="{{ request()->is('about') ? 'active' : '' }}">About</a>
上記の例では、現在のURLパスが指定したパスに一致する場合に、
active
クラスが追加されます。 -
ヘルパーメソッドを使用したアクティブクラス: Laravelには、アクティブなリンクを判別するためのヘルパーメソッドも用意されています。以下はその例です。
<a href="{{ url('/') }}" class="{{ url()->current() == url('/') ? 'active' : '' }}">Home</a> <a href="{{ url('/about') }}" class="{{ url()->current() == url('/about') ? 'active' : '' }}">About</a>
上記の例では、現在のURLが指定したURLと一致する場合に、
active
クラスが追加されます。
これらの方法を使用することで、Laravelでアクティブなリンクのクラスを設定することができます。適切な方法を選択し、ナビゲーションメニューやリンクに適用してください。