# Breadcrumb

Displays the path to the current resource using a hierarchy of links.

- Install: `php artisan blatui:add breadcrumb`
- Source: https://blatui.remix-it.com/r/breadcrumb.json
- Composer: `composer require mallardduck/blade-lucide-icons gehrisandro/tailwind-merge-laravel`

## resources/views/components/ui/breadcrumb.blade.php

```blade
<nav aria-label="breadcrumb" data-slot="breadcrumb" {{ $attributes }}>
    {{ $slot }}
</nav>
```

## resources/views/components/ui/breadcrumb-ellipsis.blade.php

```blade
<span
    data-slot="breadcrumb-ellipsis"
    role="presentation"
    aria-hidden="true"
    {{ $attributes->twMerge('flex size-9 items-center justify-center') }}
>
    <x-lucide-more-horizontal class="size-4" />
    <span class="sr-only">More</span>
</span>
```

## resources/views/components/ui/breadcrumb-item.blade.php

```blade
<li data-slot="breadcrumb-item" {{ $attributes->twMerge('inline-flex items-center gap-1.5') }}>
    {{ $slot }}
</li>
```

## resources/views/components/ui/breadcrumb-link.blade.php

```blade
@props(['href' => '#'])

<a href="{{ $href }}" data-slot="breadcrumb-link" {{ $attributes->twMerge('hover:text-foreground transition-colors') }}>
    {{ $slot }}
</a>
```

## resources/views/components/ui/breadcrumb-list.blade.php

```blade
<ol data-slot="breadcrumb-list" {{ $attributes->twMerge('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5') }}>
    {{ $slot }}
</ol>
```

## resources/views/components/ui/breadcrumb-page.blade.php

```blade
<span
    data-slot="breadcrumb-page"
    role="link"
    aria-disabled="true"
    aria-current="page"
    {{ $attributes->twMerge('text-foreground font-normal') }}
>{{ $slot }}</span>
```

## resources/views/components/ui/breadcrumb-separator.blade.php

```blade
<li
    data-slot="breadcrumb-separator"
    role="presentation"
    aria-hidden="true"
    {{ $attributes->twMerge('[&>svg]:size-3.5') }}
>
    @if (trim($slot) !== '')
        {{ $slot }}
    @else
        <x-lucide-chevron-right />
    @endif
</li>
```