【Laravel】パンくずリストの実装：laravel-breadcrumbsの使い方

パンくずリストとはサイトを訪れたユーザーに現在どこにアクセスしているか視覚的にわかりやすく伝える表示のことです。パンくずリストは英語で「Breadcrumb Navigation」または「Breadcrumbs」と言います。

次図のようにパンくずリストはサイトの階層をリスト化して表示するのが一般的です。

パンくずリストはページ上部に設置されていることが多いです。パンくずリストに表示されている階層はリンクになっており、クリックすることでその階層に移動できるようになっています。

パンくずリストを設置することはユーザビリティを高めるだけでなく、SEOとしても効果が期待できます。

laravel-breadcrumbsはLaravelで開発しているWebアプリケーションにパンくずリストを簡単に実装できるパッケージです。

2023年11月現在ではLaravel 10にも対応しており、ほとんどのLaravelのバージョン（6以上）で利用できます。

パンくずリストのスタイルは<Bootstrap 5 breadcrumb listがデフォルトとなっています。

laravel-breadcrumbsのライセンスはMITライセンスです。

パンくずリストは複数階層あるのが通常です。laravel-breadcrumbsでは簡単に階層構造を持つパンくずリストを定義できます。

例えばhomeに続く「users」ページに続くパンくずリストを定義するには次のように記述します。

Breadcrumbs::for('users', function ($trail) {
    $trail->parent('home');
    $trail->push('Users', route('users'));
});

上記のように親となるルートを「$trail->parent('home');」と指定することで、現在のpushするUsersが子となります。

さらに下の深い階層を定義する場合は、同じように続けます。ここではusersの下にある「team」ページを定義しています。

Breadcrumbs::for('team', function ($trail) {
    $trail->parent('users');
    $trail->push('Team', route('team'));
});

パンくずリストで変数を組み込む場合、以下のようにBreadcrumbs::for()メソッド内の無名関数の引数で受け取る変数を定義します。

Breadcrumbs::for('article', function ($trail, $article) {
    $trail->parent('home');
    $trail->push($article, route('article'));
});

Bladeでは次のようにBreadcrumbs::renderの引数に変数を渡します。

{{ Breadcrumbs::render('article', $article) }}

デフォルトのレイアウトではなく、自分のサイトに合ったレイアウトに変更したいですよね。その場合はまず以下コマンドを実行して、設定ファイルを生成します。

php artisan vendor:publish --tag=breadcrumbs-config

上記コマンドを実行するとconfigフォルダ内にbreadcrumbs.phpが生成されます。

このファイル内のviewという項目を変更します。デフォルトでは以下のように記述されています。

'view' => 'breadcrumbs::bootstrap5',

ここにパンくずリスト用のbladeテンプレートを指定します。
ここでは「resources/views/layouts/breadcrumbs.blade.php」を指定します。

'view' => 'layouts.breadcrumbs',

breadcrumbs.blade.phpは以下のソースコードを元に編集して好きなレイアウトにしてください。

@if (count($breadcrumbs))
    <ol class="breadcrumb">
        @foreach ($breadcrumbs as $breadcrumb)
            @if ($breadcrumb-<url && !$loop-<last)
                <li class="breadcrumb-item"><a href="{{ $breadcrumb-<url }}">{{ $breadcrumb-<title }}</a></li>
            @else
                <li class="breadcrumb-item active">{{ $breadcrumb-<title }}</li>
            @endif
        @endforeach
    </ol>
@endif