Breadcrumb not show in blade

Hello Everyone,

I have have this index.blade

<x-app-layout>
    @php
        $breadcrumbs = [
            ['name' => 'Home', 'url' => '/'],
            ['name' => 'Roles', 'url' => '/roles'],
            ['name' => 'Roles', 'url' => '/roles/test', 'current' => true],
        ];
    @endphp
</x-app-layout>

in app.blade.php

I put this code for breadcrumb

@isset($breadcrumbs)
                    <nav class="flex" aria-label="Breadcrumb">
                        <ol class="inline-flex items-center space-x-1 md:space-x-3">
                            <li class="inline-flex items-center">
                                <a href="#"
                                   class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                                    <svg class="w-3 h-3 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                         fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
                                    </svg>
                                    Home
                                </a>
                            </li>
@foreach ($breadcrumbs as $breadcrumb)
                                @if($breadcrumb['current'])
                                    <li aria-current="page">
                                        <div class="flex items-center">
                                            <svg class="w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                                            </svg>
                                            <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">{{ $breadcrumb['name'] }}</span>
                                        </div>
                                    </li>
                                @else
                                    <li>
                                        <div class="flex items-center">
                                            <svg class="w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                                            </svg>
                                            <a href="{{ $breadcrumb['url'] }}" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white">{{ $breadcrumb['name'] }}</a>
                                        </div>
                                    </li>
                                @endif

                            @endforeach
                        </ol>
                    </nav>
                @endisset

I want to know what is the best practice to do something like this pass some links to component

LaryAI

2 years ago

Level 58

To pass links to a component in Laravel, you can make use of component slots. Here's how you can modify your code to achieve this:

Modify your index.blade.php file to include the x-breadcrumb component and pass the $breadcrumbs variable as a slot:

<x-app-layout>
    <x-breadcrumb>
        @php
            $breadcrumbs = [
                ['name' => 'Home', 'url' => '/'],
                ['name' => 'Roles', 'url' => '/roles'],
                ['name' => 'Roles', 'url' => '/roles/test', 'current' => true],
            ];
        @endphp

        @foreach ($breadcrumbs as $breadcrumb)
            <x-breadcrumb-item :breadcrumb="$breadcrumb" />
        @endforeach
    </x-breadcrumb>
</x-app-layout>

Create a new component called Breadcrumb using the php artisan make:component Breadcrumb command. This will generate a new component class in the app/View/Components directory.
Open the Breadcrumb.php file and modify it as follows:

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Breadcrumb extends Component
{
    public function render()
    {
        return view('components.breadcrumb');
    }
}

Create a new blade file called breadcrumb.blade.php in the resources/views/components directory and add the following code:

<nav class="flex" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1 md:space-x-3">
        {{ $slot }}
    </ol>
</nav>

Create a new component called BreadcrumbItem using the php artisan make:component BreadcrumbItem command. This will generate a new component class in the app/View/Components directory.
Open the BreadcrumbItem.php file and modify it as follows:

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class BreadcrumbItem extends Component
{
    public $breadcrumb;

    public function __construct($breadcrumb)
    {
        $this->breadcrumb = $breadcrumb;
    }

    public function render()
    {
        return view('components.breadcrumb-item');
    }
}

Create a new blade file called breadcrumb-item.blade.php in the resources/views/components directory and add the following code:

@if($breadcrumb['current'])
    <li aria-current="page">
        <div class="flex items-center">
            <svg class="w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
            </svg>
            <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">{{ $breadcrumb['name'] }}</span>
        </div>
    </li>
@else
    <li>
        <div class="flex items-center">
            <svg class="w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
            </svg>
            <a href="{{ $breadcrumb['url'] }}" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white">{{ $breadcrumb['name'] }}</a>
        </div>
    </li>
@endif

Now, when you render the index.blade.php file, the $breadcrumbs variable will be passed to the x-breadcrumb component, which will then render each breadcrumb item using the x-breadcrumb-item component.