Portal UI

Breadcrumb

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

<x-portal::breadcrumb>
    <x-portal::breadcrumb.item href="/">Home</x-portal::breadcrumb.item>
    <x-portal::breadcrumb.item href="/">Blog</x-portal::breadcrumb.item>
    <x-portal::breadcrumb.item>Post</x-portal::breadcrumb.item>
</x-portal::breadcrumb>

Publishing Component

If you want to customize the components, you can publish them by running the following command :

php artisan vendor:publish --tag=portal-ui:breadcrumb --force


Custom Separator

Available separator type : default slash double double-slash

<x-portal::breadcrumb>
    <x-portal::breadcrumb.item separator="slash" href="/">Home</x-portal::breadcrumb.item>
    <x-portal::breadcrumb.item separator="slash" href="/">Blog</x-portal::breadcrumb.item>
    <x-portal::breadcrumb.item separator="slash">Post</x-portal::breadcrumb.item>
</x-portal::breadcrumb>


Collapsed

<x-portal::breadcrumb>
    <x-portal::breadcrumb.item href="/">Home</x-portal::breadcrumb.item>
    <x-portal::breadcrumb.item>
        <x-tabler-dots class="h-4.5" />
    </x-portal::breadcrumb.item>
    <x-portal::breadcrumb.item>Post</x-portal::breadcrumb.item>
</x-portal::breadcrumb>


With Icon

<x-portal::breadcrumb>
    <x-portal::breadcrumb.item href="/">
        <x-tabler-home-f class="h-4.5" />
    </x-portal::breadcrumb.item>
    <x-portal::breadcrumb.item href="/">Home</x-portal::breadcrumb.item>
    <x-portal::breadcrumb.item href="/">Blog</x-portal::breadcrumb.item>
    <x-portal::breadcrumb.item>Post</x-portal::breadcrumb.item>
</x-portal::breadcrumb>