Breadcrumbs – Laravel Livewire Basic Components

Breadcrumbs are used to indicate the current page’s location within a navigational hierarchy.

1<x-breadcrumb>
2    <x-breadcrumb.item>Settings</x-breadcrumb.item>
3    <x-breadcrumb.item>Account</x-breadcrumb.item>
4    <x-breadcrumb.item current>Notifications</x-breadcrumb.item>
5</x-breadcrumb>

Links

Breadcrumbs can be used as links by adding the href attribute to each <x-breadcrumb.item> component.

1<x-breadcrumb>
2    <x-breadcrumb.item href="/settings">Settings</x-breadcrumb.item>
3    <x-breadcrumb.item href="/account">Account</x-breadcrumb.item>
4    <x-breadcrumb.item current>Notifications</x-breadcrumb.item>
5</x-breadcrumb>

Navigation and Target

Items with an href get wire:navigate, so Livewire loads the page without a full reload. Add :navigate="false" for a normal page load. Items without href and the current item never get it.

target="_blank" also removes wire:navigate.

target is not written to the link

In v1.6.13 the item only uses target to drop wire:navigate; the attribute itself is not rendered on the <a>, so the link still opens in the same tab.

1<x-breadcrumb>
2    <x-breadcrumb.item href="https://example.com" target="_blank">Website</x-breadcrumb.item> 
3    <x-breadcrumb.item href="/settings" :navigate="false">Settings</x-breadcrumb.item> 
4    <x-breadcrumb.item href="/account">Account</x-breadcrumb.item>
5    <x-breadcrumb.item current>Notifications</x-breadcrumb.item>
6</x-breadcrumb>