K
KoreUI

Breadcrumbs

UI

Sistema de navegación jerárquica con componente Blade visual y sistema de registro PHP.

Uso básico

Resuelve automáticamente basado en la ruta actual usando el registry.

{{-- Resuelve automáticamente basado en la ruta actual --}}
<x-kore::breadcrumbs />
{{-- Resuelve automáticamente basado en la ruta actual --}}
<x-kore::breadcrumbs />

Items manuales

Pasa los items directamente como array.

<x-kore::breadcrumbs :items="[
    ['label' => 'Inicio', 'url' => '/', 'icon' => 'home'],
    ['label' => 'Productos', 'url' => '/products'],
    ['label' => 'Detalle'],
]" />
<x-kore::breadcrumbs :items="[
    ['label' => 'Inicio', 'url' => '/', 'icon' => 'home'],
    ['label' => 'Productos', 'url' => '/products'],
    ['label' => 'Detalle'],
]" />

Separadores

Personaliza el separador con texto o iconos Lucide.

{{-- Icono (default) --}}
<x-kore::breadcrumbs separator="icon:chevron-right" :items="$items" />

{{-- Texto --}}
<x-kore::breadcrumbs separator="/" :items="$items" />

{{-- Otro icono --}}
<x-kore::breadcrumbs separator="icon:slash" :items="$items" />
{{-- Icono (default) --}}
<x-kore::breadcrumbs separator="icon:chevron-right" :items="$items" />

{{-- Texto --}}
<x-kore::breadcrumbs separator="/" :items="$items" />

{{-- Otro icono --}}
<x-kore::breadcrumbs separator="icon:slash" :items="$items" />

Tamaños

Cuatro tamaños disponibles: xs, sm, md (default), lg.

<x-kore::breadcrumbs :items="$items" size="xs" />
<x-kore::breadcrumbs :items="$items" size="sm" />
<x-kore::breadcrumbs :items="$items" size="md" />
<x-kore::breadcrumbs :items="$items" size="lg" />
<x-kore::breadcrumbs :items="$items" size="xs" />
<x-kore::breadcrumbs :items="$items" size="sm" />
<x-kore::breadcrumbs :items="$items" size="md" />
<x-kore::breadcrumbs :items="$items" size="lg" />

Collapsible

Cuando hay muchos niveles, usa max-items para colapsar los intermedios con un botón de ellipsis.

<x-kore::breadcrumbs :max-items="4" :items="[
    ['label' => 'Home', 'url' => '/'],
    ['label' => 'Tienda', 'url' => '/store'],
    ['label' => 'Ropa', 'url' => '/store/clothing'],
    ['label' => 'Categoría', 'url' => '/store/clothing/category'],
    ['label' => 'Subcategoría', 'url' => '/store/clothing/category/sub'],
    ['label' => 'Producto'],
]" />
<x-kore::breadcrumbs :max-items="4" :items="[
    ['label' => 'Home', 'url' => '/'],
    ['label' => 'Tienda', 'url' => '/store'],
    ['label' => 'Ropa', 'url' => '/store/clothing'],
    ['label' => 'Categoría', 'url' => '/store/clothing/category'],
    ['label' => 'Subcategoría', 'url' => '/store/clothing/category/sub'],
    ['label' => 'Producto'],
]" />

Props

Prop Tipo Default Descripción
items array|Collection|null null Items manuales. Si null, auto-resolve desde registry
separator string icon:chevron-right Separador: texto o icon:nombre-lucide
separator-class string|null null Clases CSS adicionales para el separador
size string md Tamaño: xs, sm, md, lg
max-items int|null null Máximo visible. Si hay más, colapsa con ellipsis
json-ld bool false Genera JSON-LD structured data para SEO

Sistema de registro PHP

Define breadcrumbs en PHP con herencia y route model binding.

routes/kore-breadcrumbs.php 
use KoreUi\Breadcrumbs\BreadcrumbTrail;
use KoreUi\Facades\Kore;

// Raíz
Kore::breadcrumbs()
    ->for('home', fn (BreadcrumbTrail $trail) => $trail
        ->push('Inicio', route('home'), icon: 'home')
    );

// Con herencia
Kore::breadcrumbs()
    ->for('users.index', fn (BreadcrumbTrail $trail) => $trail
        ->parent('home')
        ->push('Usuarios', route('users.index'), icon: 'users')
    );

// Con route model binding
Kore::breadcrumbs()
    ->for('users.show', fn (BreadcrumbTrail $trail, User $user) => $trail
        ->parent('users.index')
        ->push($user->name)
    );
use KoreUi\Breadcrumbs\BreadcrumbTrail;
use KoreUi\Facades\Kore;

// Raíz
Kore::breadcrumbs()
    ->for('home', fn (BreadcrumbTrail $trail) => $trail
        ->push('Inicio', route('home'), icon: 'home')
    );

// Con herencia
Kore::breadcrumbs()
    ->for('users.index', fn (BreadcrumbTrail $trail) => $trail
        ->parent('home')
        ->push('Usuarios', route('users.index'), icon: 'users')
    );

// Con route model binding
Kore::breadcrumbs()
    ->for('users.show', fn (BreadcrumbTrail $trail, User $user) => $trail
        ->parent('users.index')
        ->push($user->name)
    );

Configuración

Puedes personalizar los defaults en config/kore-ui.php.

config/kore-ui.php 
'breadcrumbs' => [
    'enabled' => true,
    'files' => base_path('routes/kore-breadcrumbs.php'),
    'separator' => 'icon:chevron-right',
    'size' => 'md',
    'json_ld' => false,
],
'breadcrumbs' => [
    'enabled' => true,
    'files' => base_path('routes/kore-breadcrumbs.php'),
    'separator' => 'icon:chevron-right',
    'size' => 'md',
    'json_ld' => false,
],