F
Filament•2y ago
tuto1902

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',
]" />
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.
No description
Solution:
Oh, I figured it out. I was missing the dir property in my html document. 
<html dir="ltr">
<html dir="ltr">
...
Jump to solution
5 Replies
tuto1902
tuto1902OP•2y ago
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
tuto1902
tuto1902OP•2y ago
I mean, the Panel Builder uses the same component, and those breadcrumbs look fine
No description
Solution
tuto1902
tuto1902•2y ago
Oh, I figured it out. I was missing the dir property in my html document. 
<html dir="ltr">
<html dir="ltr">
tuto1902
tuto1902OP•2y ago
The 'ltr:hidden' should have been my first clue
Travis
Travis•17mo ago
Thx for sharing your solution. I saw that it was generating both, but hiding accordingly. I didn't realize one had to define ltr/rtl explicitly. 😅

Did you find this page helpful?