概要

Laravel でパンくずリストライブラリbreadcrumbsを使います。

▶ 動作確認環境

PHP 7.1.21
Laravel 5.7

使ってみよう

▶ インストール

php composer.phar require davejamesmiller/laravel-breadcrumbs

そうするとcomposer.jsonに記述が追加されます。

※ Laravel 5.5移行は基本的にconfig/app.phpの2箇所追記は不要です。
参考： Qiita [Laravel5.5]Package Auto Discoveryを理解する

▶ パンくずリストを定義する

routes配下に breadcrumbs.php というファイルを作り
このファイルにパンくずリストを定義していきます。

routes/breadcrumbs.php（例）


<?php

// ホーム
Breadcrumbs::for('home', function ($trail) {
    $trail->push('ホーム', url('home'));
});


// ホーム > 本の一覧
Breadcrumbs::for('books', function ($trail) {
    $trail->parent('home');
    $trail->push('本の一覧', url('books'));
});

// ホーム > 本の一覧 >  [Title]
Breadcrumbs::for('showBook', function ($trail, $book) {
    $trail->parent('books');
    $trail->push($book->book_title, url('books/' . $book->id));

});

// ホーム > 本の一覧 >  [Title]  > 編集
Breadcrumbs::for('editBook', function ($trail, $book) {
    $trail->parent('showBook', $book);
    $trail->push('編集', url('books/' . $book->id .'/edit'));
});

公式ではroute()が使われてるけど、これ使う場合はroute/web.phpで名前を定義しないといけないよ。

▶ View に反映

- とりあえず

これらをviewに埋め込みます。

パーツ

{{ Breadcrumbs::render('home') }}
{{ Breadcrumbs::render('book') }}
{{ Breadcrumbs::render('showBook', $book) }}
{{ Breadcrumbs::render('editBook', $book) }}

これで完成じゃ！わーい

- テンプレートに埋め込む

ちょっとこだわってテンプレートに埋め込んでみる

親テンプレ

好きな場所に@yield('breadcrumbs')を埋め込む

resources/views/layouts/myapp.blade.php

<!DOCTYPE html>
<html lang="ja">
    <body>
    <nav></nav>
    @yield('breadcrumbs')
    </body>
</html>

子ページ

好きな場所にこれらを埋め込む。

@section('breadcrumbs', Breadcrumbs::render('home'))
@section('breadcrumbs', Breadcrumbs::render('books'))
@section('breadcrumbs', Breadcrumbs::render('showBook', $book))
@section('breadcrumbs', Breadcrumbs::render('editBook', $book))

▶ パンくずリストのスタイルを準備

パンくずリストのスタイルを自分で作りたいこの手順を実行します。

- breadcrumbs の設定ファイルを生成

php artisan vendor:publish --provider="DaveJamesMiller\Breadcrumbs\BreadcrumbsServiceProvider"

するとconfig/breadcrumbs.phpが作成される。

- config/breadcrumbs.php を編集

スタイル（view）の参照先を指定します。
（パンくずリスト自体のviewがどこにあるのかを書きます。）

resources/view/components に breadcrumbs.blade.php を作る場合の例です。

config/breadcrumbs.php

// 'view' => 'breadcrumbs::bootstrap4',
'view' => 'components/breadcrumbs',

- パンくずリストのスタイルを作る

パンくずリスト部分のviewをパーツ的に作ります。

resources/view/components/breadcrumbs.blade.php

@if (count($breadcrumbs))
    <ul 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
    </ul>
@endif

▶ 完成図

できたー

参考にしたサイト

Github davejamesmiller/laravel-breadcrumbs

Laravelのパンくずリスト(Breadcrumb)の実装（リンクとJSON-LD)

Laravel-Breadcrumbが便利だった

Laravel：パンくずリスト

概要