Filament•2mo ago

Custom Icons in Breadcrumbs

Hi! Is It possibile to add an icon before each element of a custom breadcrumb? I've made a custom ViewField in a form with a custom breadcrumb to easily navigate related resources (customer->contracts->resources) what I need is to add a custom icon for each resource ( icon_customer + customer-> icon_contract + contracts-> icon_resource + resources)

Solution:

```php <?php namespace App\Forms\Components; ...

Jump to solution

5 Replies

Dennis Koch•2mo ago

What's the issue you are having? If you want custom icons and already have a view field, just add SVGs or some Blade icons you want.

wdogOP•5w ago

I solved creating a custom breadcrumb field, the initial question was about adding icons to default breadcrumb

Solution

wdog•5w ago

<?php

namespace App\Forms\Components;

use Illuminate\Support\Collection;
use Filament\Forms\Components\View;
use Filament\Forms\Components\Field;

class CustomBreadcrumbField extends Field
{
    protected string $view = 'forms.components.custom-breadcrumb-field';

    protected \Closure $getItemsUsing;



    public function items(\Closure $closure): static
    {
        $this->getItemsUsing = $closure;
        return $this;
    }

    public function getItems(): array
    {
        $items =  ($this->getItemsUsing)($this->getRecord());

        return  collect($items)->map(function ($item) {
            return array_merge([
                'label' => null,
                'sub-label' => null,
                'url' => null,
                'icon' => null,
            ], $item);
        })->toArray();
    }
}

<?php

namespace App\Forms\Components;

use Illuminate\Support\Collection;
use Filament\Forms\Components\View;
use Filament\Forms\Components\Field;

class CustomBreadcrumbField extends Field
{
    protected string $view = 'forms.components.custom-breadcrumb-field';

    protected \Closure $getItemsUsing;



    public function items(\Closure $closure): static
    {
        $this->getItemsUsing = $closure;
        return $this;
    }

    public function getItems(): array
    {
        $items =  ($this->getItemsUsing)($this->getRecord());

        return  collect($items)->map(function ($item) {
            return array_merge([
                'label' => null,
                'sub-label' => null,
                'url' => null,
                'icon' => null,
            ], $item);
        })->toArray();
    }
}

wdogOP•5w ago

  CustomBreadcrumbField::make('breadcrumbs')
    ->label('navigation')
    ->items(
      fn(Model $record) => [
          [
            'label' =>  $record->contratto->azienda->codice,
            'sub-label' => $record->contratto->azienda->ragsoc,
            'url'   =>  route('filament.admin.resources.cliente.edit', $record->contratto->azienda),
            'icon'  => 'tabler-building-community',
            'color' => 'text-primary-500',
          ],
          [
            'label' => $record->contratto->codice,
            'url'   => route('filament.admin.resources.contratto.edit', $record->contratto),
            'icon'  => 'tabler-file-invoice',
            'color' => 'text-warning-500',
           ]
        ]),

  CustomBreadcrumbField::make('breadcrumbs')
    ->label('navigation')
    ->items(
      fn(Model $record) => [
          [
            'label' =>  $record->contratto->azienda->codice,
            'sub-label' => $record->contratto->azienda->ragsoc,
            'url'   =>  route('filament.admin.resources.cliente.edit', $record->contratto->azienda),
            'icon'  => 'tabler-building-community',
            'color' => 'text-primary-500',
          ],
          [
            'label' => $record->contratto->codice,
            'url'   => route('filament.admin.resources.contratto.edit', $record->contratto),
            'icon'  => 'tabler-file-invoice',
            'color' => 'text-warning-500',
           ]
        ]),

@props(['items'])

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">

    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }">

        <nav aria-label="Breadcrumb">
            <ol class="flex">
                @foreach ($getItems() as $index => $item)
                    <li class="flex space-x-2 items-top">

                        @if ($item['icon'])
                            <x-dynamic-component :component="$item['icon']" class="w-6 h-6" />
                        @endif

                        @if ($item['url'])
                            <a href="{{ $item['url'] }}" class="">
                                <div class="flex flex-col ">
                                    <div class="font-bold text-bold {{ $item['color'] }}">
                                        {{ $item['label'] }}
                                    </div>

                                    <span class="text-xs">
                                        {{ $item['sub-label'] }}
                                    </span>
                                </div>
                            </a>
                        @else
                            <span class="">
                                {{ $item['label'] }}
                            </span>
                        @endif

                        @if ($index !== count($getItems()) - 1)
                            <x-tabler-chevron-right />
                        @endif
                    </li>
                @endforeach
            </ol>
        </nav>


    </div>
</x-dynamic-component>

@props(['items'])

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">

    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }">

        <nav aria-label="Breadcrumb">
            <ol class="flex">
                @foreach ($getItems() as $index => $item)
                    <li class="flex space-x-2 items-top">

                        @if ($item['icon'])
                            <x-dynamic-component :component="$item['icon']" class="w-6 h-6" />
                        @endif

                        @if ($item['url'])
                            <a href="{{ $item['url'] }}" class="">
                                <div class="flex flex-col ">
                                    <div class="font-bold text-bold {{ $item['color'] }}">
                                        {{ $item['label'] }}
                                    </div>

                                    <span class="text-xs">
                                        {{ $item['sub-label'] }}
                                    </span>
                                </div>
                            </a>
                        @else
                            <span class="">
                                {{ $item['label'] }}
                            </span>
                        @endif

                        @if ($index !== count($getItems()) - 1)
                            <x-tabler-chevron-right />
                        @endif
                    </li>
                @endforeach
            </ol>
        </nav>


    </div>
</x-dynamic-component>

hope this is a right solution ( it works)

Dennis Koch•5w ago

If it works then it’s fine, right? 😅

Gaming

Programming

Custom Icons in Breadcrumbs

Did you find this page helpful?