Skip to main content

Navigation

Breadcrumbs code

Copy the implementation or inspect every file that belongs to this component unit.

resources/views/components/ui/breadcrumbs.blade.php

@props([
    'items' => [],
])

@php
    /*
    | Breadcrumb trail. Pass `items` as an array of ['label' => string, 'href' => ?string].
    | The last item is rendered as the current page.
    |
    | Usage:
    |   <x-ui.breadcrumbs :items="[
    |       ['label' => 'Home', 'href' => '/'],
    |       ['label' => 'Settings', 'href' => '/settings'],
    |       ['label' => 'Profile'],
    |   ]" />
    */
    $last = count($items) - 1;
@endphp

<nav aria-label="Breadcrumb" {{ $attributes }}>
    <ol class="flex items-center gap-1.5 text-sm">
        @foreach ($items as $i => $item)
            <li class="flex items-center gap-1.5">
                @if ($i < $last && ! empty($item['href']))
                    <a href="{{ $item['href'] }}" class="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition">{{ $item['label'] }}</a>
                @else
                    <span class="font-medium text-gray-900 dark:text-white" aria-current="page">{{ $item['label'] }}</span>
                @endif

                @if ($i < $last)
                    <x-ui.icon name="caret-right" weight="bold" size="xs" class="text-gray-300 dark:text-gray-600" />
                @endif
            </li>
        @endforeach
    </ol>
</nav>