Breadcrumbs showing both left < and right > chevrons

I'm using the breadcrumbs blade component directly in a view, like this

 <x-filament::breadcrumbs :breadcrumbs="[
    '/' => 'Home',
    '/tasks' => 'Tasks',
    '/tasks/create' => 'Create Task',
]" />

 <x-filament::breadcrumbs :breadcrumbs="[
    '/' => 'Home',
    '/tasks' => 'Tasks',
    '/tasks/create' => 'Create Task',
]" />

 <x-filament::breadcrumbs :breadcrumbs="[
    '/' => 'Home',
    '/tasks' => 'Tasks',
    '/tasks/create' => 'Create Task',
]" />

 <x-filament::breadcrumbs :breadcrumbs="[
    '/' => 'Home',
    '/tasks' => 'Tasks',
    '/tasks/create' => 'Create Task',
]" />

Which is how the documentation recommends it. But it is showing up in my view like this (attached image)

Why is there a chevron left

<

< next to each item? Shouldn't it just show a chevron right?

>

>

I should note that I'm not using the panels package. Only the forms package in a custom livewire page.

Solution

Oh, I figured it out. I was missing the dir property in my html document.

<html dir="ltr">

<html dir="ltr">

<html dir="ltr">

<html dir="ltr">

Jump to solution

tuto1902OP•9/30/23, 5:37 AM

looking at the breadcrumbs code from the vendor folder, I'm confused as to why there is a left and right chevrons on all items except the first one

@if (! $loop->first)
    <x-filament::icon
        :alias="$iconAlias"
        icon="heroicon-m-chevron-right"
        @class([
            $iconClasses,
            'rtl:hidden',
        ])
    />
    <!-- What is this one for? 👇🏼-->
    <x-filament::icon
        :alias="$iconAlias"
        icon="heroicon-m-chevron-left"
        @class([
            $iconClasses,
            'ltr:hidden',
        ])
    />
@endif

@if (! $loop->first)
    <x-filament::icon
        :alias="$iconAlias"
        icon="heroicon-m-chevron-right"
        @class([
            $iconClasses,
            'rtl:hidden',
        ])
    />
    <!-- What is this one for? 👇🏼-->
    <x-filament::icon
        :alias="$iconAlias"
        icon="heroicon-m-chevron-left"
        @class([
            $iconClasses,
            'ltr:hidden',
        ])
    />
@endif

tuto1902OP•9/30/23, 5:39 AM

I mean, the Panel Builder uses the same component, and those breadcrumbs look fine

Solution

tuto1902•9/30/23, 5:49 AM

Oh, I figured it out. I was missing the dir property in my html document.

<html dir="ltr">

<html dir="ltr">

tuto1902OP•9/30/23, 5:49 AM

The 'ltr:hidden''ltr:hidden' should have been my first clue

Travis•10/27/23, 3:05 PM

Thx for sharing your solution.

I saw that it was generating both, but hiding accordingly. I didn't realize one had to define ltrltr/rtlrtl explicitly.