Basic Breadcrumbs

Manual Breadcrumbs

Custom Separator

Truncation

When breadcrumbs exceed maxItems (default: 5), middle items are hidden in a dropdown. Click "..." to see hidden items.

Long Labels

Long labels are automatically truncated with ellipsis to maintain layout.

Breadcrumbs Component

Navigation breadcrumb component that automatically generates from URL segments or accepts manual items.

Basic Usage

<x-navigation.breadcrumbs />

When used without props, the component automatically generates breadcrumbs from the current URL segments.

Props

items

array|null - Manual breadcrumb items array. Each item should have:

  • label - string (required) - Display text
  • url - string|null - Link URL (null for current page)

Default: null (auto-generate from URL)

separator

string|null - Separator between breadcrumb items. Can be:

  • FontAwesome icon name (e.g., chevron-right, angle-right)
  • Text character (e.g., ›, /, →)

Default: ›

maxItems

int - Maximum number of breadcrumb items to show before truncation. When exceeded, middle items are hidden in a dropdown.

Default: 5

Features

  • Auto-generation - Automatically creates breadcrumbs from URL segments
  • Manual override - Accept custom items array for full control
  • Smart truncation - Hides middle items when exceeding maxItems
  • Dropdown navigation - Click "..." to see hidden breadcrumb items
  • Custom separators - Use FontAwesome icons or text characters
  • Responsive - Adapts to mobile screens with proper truncation
  • Accessibility - Includes ARIA labels for screen readers
  • Theme integration - Uses CSS variables for accent colors

Examples

Auto-generated from URL
<x-navigation.breadcrumbs />

For URL: /admin/users/123/edit

Generates: Dashboard › Users › 123 › Edit

Manual items
<x-navigation.breadcrumbs :items="[
    ['label' => 'Dashboard', 'url' => route('admin.home')],
    ['label' => 'Products', 'url' => route('admin.products.index')],
    ['label' => 'Edit Product', 'url' => null],
]" />
Custom separator
<x-navigation.breadcrumbs separator="chevron-right" />
Truncation control
<x-navigation.breadcrumbs :maxItems="3" />

Notes

  • The component automatically skips the "admin" segment if it's the first segment (since it's a route prefix)
  • Last item in the breadcrumb is always non-clickable (current page)
  • When truncation occurs, first item (Dashboard) and last 2 items are always visible
  • Long labels are automatically truncated with CSS ellipsis
  • Home icon links to Dashboard route or root URL