Skip to content

Overview

The Breadcrumbs component renders a navigation trail that helps users understand their current location within the application hierarchy. Each item can be a link or plain text (for the current/last item). The component supports different separator styles and optional icons per item.

Use breadcrumbs for:

  • Multi-level page hierarchies
  • Admin panel navigation
  • Content management paths
  • E-commerce category navigation

Basic Usage

<x-aura::breadcrumbs :items="[
    ['label' => 'Home', 'href' => '/'],
    ['label' => 'Products', 'href' => '/products'],
    ['label' => 'Details'],
]" />

Props

Prop Type Default Description
items array [] Array of breadcrumb items. Each item: ['label' => string, 'href' => string|null, 'icon' => string|null]
separator string 'chevron' Separator style: chevron (>), slash (/), dot (.)

Item Structure

Each item in the items array accepts:

Key Type Required Description
label string Yes Display text for the breadcrumb
href string No URL. Omit for the current page (last item)
icon string No Icon name displayed before the label

Variants/Examples

With Laravel Routes

<x-aura::breadcrumbs :items="[
    ['label' => 'Dashboard', 'href' => route('dashboard')],
    ['label' => 'Users', 'href' => route('users.index')],
    ['label' => 'Edit User'],
]" />

Slash Separator

<x-aura::breadcrumbs separator="slash" :items="[
    ['label' => 'Home', 'href' => '/'],
    ['label' => 'Blog', 'href' => '/blog'],
    ['label' => 'My Article'],
]" />

Dot Separator

<x-aura::breadcrumbs separator="dot" :items="[
    ['label' => 'App', 'href' => '/app'],
    ['label' => 'Settings', 'href' => '/app/settings'],
    ['label' => 'Profile'],
]" />

With Icons

<x-aura::breadcrumbs :items="[
    ['label' => 'Home', 'href' => '/', 'icon' => 'home'],
    ['label' => 'Settings', 'href' => '/settings', 'icon' => 'settings'],
    ['label' => 'Security', 'icon' => 'lock'],
]" />

Dynamic from Controller

// In your controller or Livewire component:
$breadcrumbs = [
    ['label' => 'Products', 'href' => route('products.index')],
    ['label' => $category->name, 'href' => route('categories.show', $category)],
    ['label' => $product->name],
];

<x-aura::breadcrumbs :items="$breadcrumbs" />

Slots

The Breadcrumbs component does not use slots. All content is driven by the items prop.

Accessibility

  • The component renders inside a <nav> element with aria-label="Breadcrumbs".
  • Items are structured as an ordered list (<ol>), conveying sequence to screen readers.
  • The last item (current page) has aria-current="page" and renders as a <span> instead of a link.
  • Separators include aria-hidden="true" to prevent screen readers from announcing them.
  • All links are focusable and keyboard-navigable via standard Tab key navigation.