Breadcrumb


                    <x-ui.breadcrumb>

Trilha de navegação. Emite o JSON-LD de BreadcrumbList junto, para o Google entender a hierarquia.

Início
Serviços
Consultoria

blade

<x-ui.breadcrumb :items="[
    ['label' => 'Início', 'url' => '/'],
    ['label' => 'Serviços', 'url' => '/servicos'],
    ['label' => 'Consultoria'],
]" />

Início
Blog
Artigo

blade

<x-ui.breadcrumb
    separator="heroicon-m-arrow-right"
    size="sm"
    :items="[
        ['label' => 'Início', 'url' => '/', 'icon' => 'heroicon-m-home'],
        ['label' => 'Blog', 'url' => '/blog', 'icon' => 'heroicon-m-newspaper'],
        ['label' => 'Artigo'],
    ]"
/>

Início
Serviços

blade

<x-ui.breadcrumb
    variant="secondary"
    :items="[['label' => 'Início', 'url' => '/'], ['label' => 'Serviços']]"
/>

Props

x-ui.breadcrumb

Prop	Padrão	Aceita
items	[]
separator	'heroicon-m-chevron-right'
variant	null
size	null	xs sm base lg

Personalizar

As três camadas estão explicadas em Começar aqui. Abaixo, o que este componente expõe a cada uma.

Ui::breadcrumb()

Partes

part() e replacePart() aceitam: separator, link, current, base, list e item.

Tokens que ele lê

Nenhum específico: ele usa só cor e espaçamento do Tailwind.

Por que é assim 1 notas

O último item nunca vira link, mesmo carregando url: ele recebe aria-current="page".