PHPackages                             mrshanebarron/breadcrumbs - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. mrshanebarron/breadcrumbs

ActiveLibrary[Utility & Helpers](/categories/utility)

mrshanebarron/breadcrumbs
=========================

Breadcrumbs navigation component for Laravel - supports Livewire and Vue

v1.0.5(4mo ago)018MITBladePHP ^8.1

Since Dec 14Pushed 4mo agoCompare

[ Source](https://github.com/mrshanebarron/breadcrumbs)[ Packagist](https://packagist.org/packages/mrshanebarron/breadcrumbs)[ RSS](/packages/mrshanebarron-breadcrumbs/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)Dependencies (1)Versions (7)Used By (0)

Breadcrumbs
===========

[](#breadcrumbs)

A navigation breadcrumb component for Laravel applications. Shows the current page location within a hierarchy. Works with Livewire and Vue 3.

Installation
------------

[](#installation)

```
composer require mrshanebarron/breadcrumbs
```

Livewire Usage
--------------

[](#livewire-usage)

### Basic Usage

[](#basic-usage)

```

```

### Different Separators

[](#different-separators)

```

```

### Livewire Props

[](#livewire-props)

PropTypeDefaultDescription`items`arrayrequiredArray of breadcrumb items`separator`string`'chevron'`Separator style: `chevron`, `slash`, or custom### Item Structure

[](#item-structure)

```
[
    'label' => 'Page Name',     // Required: Display text
    'href' => '/path',          // Optional: Link URL (omit for current page)
    'icon' => '...'  // Optional: Icon HTML
]
```

Vue 3 Usage
-----------

[](#vue-3-usage)

### Setup

[](#setup)

```
import { SbBreadcrumbs } from './vendor/sb-breadcrumbs';
app.component('SbBreadcrumbs', SbBreadcrumbs);
```

### Basic Usage

[](#basic-usage-1)

```

const breadcrumbs = [
  { label: 'Home', href: '/' },
  { label: 'Products', href: '/products' },
  { label: 'Current Item' }
];

```

### With Home Icon

[](#with-home-icon)

```

const homeIcon = `

`;

const breadcrumbs = [
  { label: 'Home', href: '/', icon: homeIcon },
  { label: 'Dashboard', href: '/dashboard' },
  { label: 'Settings' }
];

```

### Separator Options

[](#separator-options)

```

```

### Dynamic Breadcrumbs

[](#dynamic-breadcrumbs)

```

import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const breadcrumbs = computed(() => {
  const items = [{ label: 'Home', href: '/' }];

  const paths = route.path.split('/').filter(Boolean);
  let currentPath = '';

  paths.forEach((segment, index) => {
    currentPath += `/${segment}`;
    items.push({
      label: segment.charAt(0).toUpperCase() + segment.slice(1),
      href: index