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.

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

tuto1902OP•14mo 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

tuto1902OP•14mo ago

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

Solution

tuto1902•14mo ago

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

<html dir="ltr">

<html dir="ltr">

tuto1902OP•14mo ago

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

Travis•14mo 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. 😅

Gaming

Programming

Breadcrumbs showing both left < and right > chevrons