Breadcrumb - Laravel Blade

Show the location of the current page in a hierarchical structure using the breadcrumb component.

Default Breadcrumb

Blade code

<x-fwb.breadcrumb>
    <x-fwb.breadcrumb.item href="/" :home="true">Home</x-fwb.breadcrumb.item>
    <x-fwb.breadcrumb.item href="/projects">Projects</x-fwb.breadcrumb.item>
    <x-fwb.breadcrumb.item>Flowbite</x-fwb.breadcrumb.item>
</x-fwb.breadcrumb>

Solid Background

Blade code

<x-fwb.breadcrumb :solid="true">
    <x-fwb.breadcrumb.item href="/" :home="true">Home</x-fwb.breadcrumb.item>
    <x-fwb.breadcrumb.item href="/projects">Projects</x-fwb.breadcrumb.item>
    <x-fwb.breadcrumb.item>Flowbite</x-fwb.breadcrumb.item>
</x-fwb.breadcrumb>

Without Home Icon

Blade code

<x-fwb.breadcrumb>
    <x-fwb.breadcrumb.item href="/">Home</x-fwb.breadcrumb.item>
    <x-fwb.breadcrumb.item href="/projects">Projects</x-fwb.breadcrumb.item>
    <x-fwb.breadcrumb.item>Flowbite</x-fwb.breadcrumb.item>
</x-fwb.breadcrumb>

Component Properties

Breadcrumb x-fwb.breadcrumb

Prop Type Default Description
solid bool false Apply a solid background with border and rounded corners.

Breadcrumb Item x-fwb.breadcrumb.item

Prop Type Default Description
href string|null null URL for the breadcrumb link. When null, renders as plain text (current page).
home bool false Display a home icon and omit the chevron separator. Use on the first item.