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>