Laravelでアクティブなリンクのクラスを設定する方法


  1. ルートベースのアクティブクラス: 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クラスが追加されます。

  2. URLベースのアクティブクラス: ルート名ではなく、URLパスに基づいてアクティブなリンクを判別することもできます。以下はその方法です。

    <a href="/" class="{{ request()->is('/') ? 'active' : '' }}">Home</a>
    <a href="/about" class="{{ request()->is('about') ? 'active' : '' }}">About</a>

    上記の例では、現在のURLパスが指定したパスに一致する場合に、activeクラスが追加されます。

  3. ヘルパーメソッドを使用したアクティブクラス: 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でアクティブなリンクのクラスを設定することができます。適切な方法を選択し、ナビゲーションメニューやリンクに適用してください。