Breadcrumb Component

The Breadcrumb component displays a navigation trail showing the current page's location within the site hierarchy.

Usage

Pass an array of items with label and url keys:

<x-breadcrumb :items="[
    ['label' => 'Home', 'url' => '/'],
    ['label' => 'Products', 'url' => '/products'],
    ['label' => 'Details', 'url' => '#']
]" />

Two Levels

Simple breadcrumb with just two levels:

<x-breadcrumb :items="[
    ['label' => 'Dashboard', 'url' => '/dashboard'],
    ['label' => 'Settings', 'url' => '#']
]" />

Multiple Levels

Breadcrumb with deep navigation hierarchy:

<x-breadcrumb :items="[
    ['label' => 'Home', 'url' => '/'],
    ['label' => 'Blog', 'url' => '/blog'],
    ['label' => 'Laravel', 'url' => '/blog/laravel'],
    ['label' => 'Getting Started', 'url' => '#']
]" />

With Named Routes

You can use Laravel's named routes:

<x-breadcrumb :items="[
    ['label' => 'Home', 'url' => route('home')],
    ['label' => 'Docs', 'url' => route('docs.show', ['topic' => 'getting-started'])],
    ['label' => 'Components', 'url' => '#']
]" />

Props Reference

Prop Type Default Description
items array - Required. Array of breadcrumb items. Each item must have label (string) and url (string) keys. The last item is automatically styled as the current page.

Item Structure

Each item in the items array should have the following structure:

[
    'label' => 'Page Name',  // The text to display
    'url' => '/page-url'     // The URL to link to
]

Behavior

  • Responsive: Hidden on mobile devices (visible from md breakpoint and up)
  • Current Page: The last item is automatically styled as the current page with bold text and no link
  • Separator: Uses a chevron-right icon between items
  • Accessibility: Includes proper ARIA labels (aria-label="breadcrumb" and aria-current="page")
  • Translation: Labels are automatically passed through Laravel's translation helper

References

Category Path / Name Description
Component resources/views/components/breadcrumb.blade.php Breadcrumb component file

For the detailed documentation, please visit the Penguin UI Breadcrumbs.