在專案中常常會使用到麵包屑導航（Breadcrumb），來引導使用者知道目前頁面所在的位置。這篇教學將示範如何在 Laravel 中製作一個簡潔又好用的 Breadcrumb 元件，並透過 Laravel 的 Blade Component 功能重複使用。

第一步：建立 Breadcrumb 元件

使用 Artisan 指令建立一個自訂元件：

php artisan make:component Breadcrumb

Laravel 會自動建立以下兩個檔案：

  • app/View/Components/Breadcrumb.php

  • resources/views/components/breadcrumb.blade.php

 

第二步：撰寫 Component 類別邏輯

// app/View/Components/Breadcrumb.php

namespace App\View\Components;

use Illuminate\View\Component;

class Breadcrumb extends Component
{
    public $breadcrumb;

    /**
     * @param array $breadcrumb 傳入的麵包屑資料陣列
     */
    public function __construct(array $breadcrumb)
    {
        $this->breadcrumb = $breadcrumb;
    }

    /**
     * 返回元件對應的 Blade 檔案
     */
    public function render()
    {
        return view('components.breadcrumb');
    }
}

這個元件接收一個名為 $breadcrumb 的陣列參數，並傳遞給對應的 Blade 檢視。

 

第三步：撰寫 Blade 檔案

<!-- resources/views/components/breadcrumb.blade.php -->

<nav aria-label="breadcrumb">
    <ol class="breadcrumb my-3">
        @foreach($breadcrumb as $item)
            @if (!$loop->last)
                <li class="breadcrumb-item">
                    @if(!empty($item['url']))
                        <a class="link-secondary" href="{{ $item['url'] }}">{{ $item['name'] }}</a>
                    @else
                        {{ $item['name'] }}
                    @endif
                </li>
            @else
                <li class="breadcrumb-item active" aria-current="page">{{ $item['name'] }}</li>
            @endif
        @endforeach
    </ol>
</nav>

 

這段程式會根據陣列產生對應的 <ol> 清單，並自動將最後一個項目標示為目前所在頁面（active 狀態）。

 

第四步：在畫面中使用元件

只要在任何 Blade 模板中使用 <x-breadcrumb> 並傳入對應的陣列即可：

<x-breadcrumb :breadcrumb="[
    ['name' => '首頁', 'url' => '/'],
    ['name' => '文章列表', 'url' => '/posts'],
    ['name' => 'Laravel Blade 元件教學']
]" />

 

顯示結果

<nav aria-label="breadcrumb">
    <ol class="breadcrumb my-3">
        <li class="breadcrumb-item"><a class="link-secondary" href="/">首頁</a></li>
        <li class="breadcrumb-item"><a class="link-secondary" href="/posts">文章列表</a></li>
        <li class="breadcrumb-item active" aria-current="page">Laravel Blade 元件教學</li>
    </ol>
</nav>

 

利用 Laravel 的 Blade Component，我們可以快速建立重複使用的 UI 元件，如麵包屑這種常見的導覽元件。這樣不但讓程式碼更乾淨，也更容易維護與擴充。