WireUi Breadcrumbs

🔥 Breadcrumbs

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.

📚 Get Started

Prerequisites:

• Laravel 10.x
• PHP 8.2+
• Livewire 3

Optional - TallStack

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

• Alpine.js 3.10
• Tailwind 3.1

Preview:

🚀 Installation

composer require wireui/breadcrumbs

Create the breadcrumbs route file

Run the following command to create the breadcrumbs route file.

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

Using Tailwind?

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

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

How to use?

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.

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

Livewire Components

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

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use WireUi\Breadcrumbs\Trail;

class Index extends Component
{
    /*
     * Don't forget
     *  - This method must return a `Trail` instance
     *  - It must be a public method
     *  - You can use dependency injection
     */
    public function breadcrumbs(Trail $trail): Trail
    {
        return $trail
            ->push('Users', route('users'))
            ->push('Create 1');
    }
}

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.

// route: /users/{user}
Breadcrumbs::for('users.view')
    ->push('Users', route('users'))
    ->push('View')
    ->callback(function (Trail $trail, User $user, Request $request): Trail {
        return $trail->push($user->name);
    });

// route: /posts/{id}
Breadcrumbs::for('posts.view')
    ->push('Users', route('users'))
    ->push('View')
    ->callback(function (Trail $trail, int $id): Trail {
        return $trail->push($id);
    });

Rendering (TallStack Only)

Just add the breadcrumbs component in your layout

<x-breadcrumbs />

Support to others frameworks is coming soon.

• [ ] Bootstrap
• [ ] Bulma

📦 Publishing (Optional)

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

📣 Follow the author

Get the latest news, updates, and insights on WireUI by following @ph7jack on Twitter. As the creator of this package, Pedro Oliveira shares valuable information about features, ideas, and community discussions.

💡 Philosophy

WireUI offers a collection of components that are essential for building web page applications, and it's completely free for anyone to use.

Created by PH7-Jack and maintained with community support, WireUI is an innovative project that welcomes contributions from developers of all backgrounds. Whether you're a seasoned professional or just starting, your input is valuable and appreciated.

Join the WireUI community today and take your web page app development to the next level!

📝 License

MIT