breadcrumb

Shows the path to the current resource as a hierarchy of links.

<x-ui.breadcrumb>
    <x-ui.breadcrumb.list>
        <x-ui.breadcrumb.item>
            <x-ui.breadcrumb.link href="#">Home</x-ui.breadcrumb.link>
        </x-ui.breadcrumb.item>
        <x-ui.breadcrumb.separator />
        <x-ui.breadcrumb.item>
            <x-ui.breadcrumb.link
                href="#">Components</x-ui.breadcrumb.link>
        </x-ui.breadcrumb.item>
        <x-ui.breadcrumb.separator />
        <x-ui.breadcrumb.item>
            <x-ui.breadcrumb.page>Breadcrumb</x-ui.breadcrumb.page>
        </x-ui.breadcrumb.item>
    </x-ui.breadcrumb.list>
</x-ui.breadcrumb>

Installation

php artisan ui:add breadcrumb

1. Install dependencies

composer: gehrisandro/tailwind-merge-laravel

2. Copy each file into resources/views/components/ui/

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

@props([])

@php
    $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
        '',
        $attributes->get('class'),
    );
@endphp

<nav aria-label="breadcrumb"
    {{ $attributes->except('class')->merge(['class' => $classes]) }}>
    {{ $slot }}
</nav>

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

@props([])

@php
    $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
        'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
        $attributes->get('class'),
    );
@endphp

<ol {{ $attributes->except('class')->merge(['class' => $classes]) }}>
    {{ $slot }}
</ol>

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

@props([])

@php
    $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
        'inline-flex items-center gap-1.5',
        $attributes->get('class'),
    );
@endphp

<li {{ $attributes->except('class')->merge(['class' => $classes]) }}>
    {{ $slot }}
</li>

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

@props([
    'href' => '#',
])

@php
    $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
        'transition-colors hover:text-foreground',
        $attributes->get('class'),
    );
@endphp

<a href="{{ $href }}"
    {{ $attributes->except('class')->merge(['class' => $classes]) }}>
    {{ $slot }}
</a>

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

@props([])

@php
    $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
        'font-normal text-foreground',
        $attributes->get('class'),
    );
@endphp

<span role="link" aria-disabled="true" aria-current="page"
    {{ $attributes->except('class')->merge(['class' => $classes]) }}>
    {{ $slot }}
</span>

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

@props([])

@php
    $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
        '[&>svg]:size-3.5',
        $attributes->get('class'),
    );
@endphp

<li role="presentation" aria-hidden="true"
    {{ $attributes->except('class')->merge(['class' => $classes]) }}>
    @if ($slot->isNotEmpty())
        {{ $slot }}
    @else
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round" aria-hidden="true">
            <path d="m9 18 6-6-6-6" />
        </svg>
    @endif
</li>

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

@props([])

@php
    $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
        'flex size-9 items-center justify-center',
        $attributes->get('class'),
    );
@endphp

<span role="presentation" aria-hidden="true"
    {{ $attributes->except('class')->merge(['class' => $classes]) }}>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round"
        stroke-linejoin="round" class="size-4">
        <circle cx="12" cy="12" r="1" />
        <circle cx="19" cy="12" r="1" />
        <circle cx="5" cy="12" r="1" />
    </svg>
    <span class="sr-only">More</span>
</span>

Usage

<x-ui.breadcrumb>
    <x-ui.breadcrumb.list>
        <x-ui.breadcrumb.item>
            <x-ui.breadcrumb.link href="/">Home</x-ui.breadcrumb.link>
        </x-ui.breadcrumb.item>
        <x-ui.breadcrumb.separator />
        <x-ui.breadcrumb.item>
            <x-ui.breadcrumb.page>Current page</x-ui.breadcrumb.page>
        </x-ui.breadcrumb.item>
    </x-ui.breadcrumb.list>
</x-ui.breadcrumb>

Pure markup, no JS. Compose <x-ui.breadcrumb><x-ui.breadcrumb.list> with .item, .link, .page, .separator, .ellipsis. The .separator renders a chevron by default or its slot if provided.

Props

Every prop with its default. Pass any of them as attributes, using : to bind a PHP value.

@props([])