WireUi

WireUI Breadcrumbs package streamlines the process of implementing breadcrumbs in your web application. Our package offers an elegant and customizable breadcrumbs API that can be easily defined in your routes or full page livewire components.

Simplify your users' navigation experience with our intuitive interface and straightforward code.

Requirements

Optional - TallStack

If do you want to use the default breadcrumbs component, you need to install these packages.

Installation

First, you need to install the package via Composer.

1composer require wireui/breadcrumbs

Publishing

Run the following command to create the breadcrumbs route file.

1php artisan vendor:publish --tag="wireui.breadcrumbs.route"

You can also publish the configuration file and views.

1php artisan vendor:publish --tag="wireui.breadcrumbs.config"
2php artisan vendor:publish --tag="wireui.breadcrumbs.views"

Using Tailwind?

Add the breadcrumbs path to the content of your Tailwind config file.

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3    content: [
4        './vendor/wireui/breadcrumbs/src/Components/**/*.php',
5        './vendor/wireui/breadcrumbs/src/views/**/*.blade.php',
6    ],
7}

How to use it?

Defining Route Breadcrumbs

You can create multiple breadcrumbs files to register your breadcrumbs.

routes/breadcrumbs.php (default)
routes/breadcrumbs/users.php
routes/breadcrumbs/customers.php

Then, register these files in the breadcrumbs config file. See the publish section .

1Breadcrumbs::for('users.view')
2    ->push('Users', route('users'))
3    ->push('View');

Livewire Components

You can define your breadcrumbs in the full page Livewire Components . The breadcrumbs in the livewire components is reactive.

 1namespace App\Http\Livewire;
 2 
 3use Livewire\Component;
 4use WireUi\Breadcrumbs\Trail;
 5 
 6class Index extends Component
 7{
 8    /*
 9    * Don't forget
10    *  - This method must return a `Trail` instance
11    *  - It must be a public method
12    *  - You can use dependency injection
13    */
14    public function breadcrumbs(Trail $trail): Trail
15    {
16        return $trail
17            ->push('Users', route('users'))
18            ->push('Create 1');
19    }
20}

Dependency Injection

When registering a route breadcrumb, you can use dependency injection. It is useful when you need to get the current model in the route breadcrumb, or any other dependency.

 1// route: /users/{user}
 2Breadcrumbs::for('users.view')
 3    ->push('Users', route('users'))
 4    ->push('View')
 5    ->callback(function (Trail $trail, User $user, Request $request): Trail {
 6        return $trail->push($user->name);
 7    });
 8 
 9// route: /posts/{id}
10Breadcrumbs::for('posts.view')
11    ->push('Users', route('users'))
12    ->push('View')
13    ->callback(function (Trail $trail, int $id): Trail {
14        return $trail->push($id);
15    });

Rendering (TallStack Only)

Just add the breadcrumbs component in your layout.

1<x-breadcrumbs />

Packages