Easily Add Breadcrumbs to your Laravel Websites

Prefer to watch? We cover all this and more in the Nested Categories and Breadcrumbs with Laravel course!

Why you should use breadcrumbs¶

First, breadcrumbs for complex sites with deeply nested structures (like an e-commerce site) help users navigate easily through pages. Adding breadcrumb navigation can help users find their way back if you have a bunch of nested product categories.

Breadcrumbs may also help with SEO. Allowing your users to easily navigate your site means they'll stick around longer, decreasing your bounce rate and improving the overall experience of your site. Also, since you're likely using keywords to link through to different pages on your site, search engines may use this data to pick up and index your pages more easily.

Ok, let's implement breadcrumbs in Laravel!

How to add breadcrumbs to Laravel¶

Starting with a fresh project¶

For this article, we'll be using Laravel Breeze as the starter kit with the Blade/Alpine option. As long as you're using Blade templates, you'll be able to follow the rest of this article.

Installing the Breadcrumbs Package¶

First, install the diglactic/laravel-breadcrumbs package.

composer require diglactic/laravel-breadcrumbs

Once that's done, publish the configuration file.

php artisan vendor:publish --tag=breadcrumbs-config

Configuring the Breadcrumbs Package¶

Depending on the CSS framework you're using, you can change how breadcrumbs are rendered. Since we're using the Breeze starter kit, let's change the configuration to use Tailwind.

Head to config/breadcrumbs.php and adjust the view option.

'view' => 'breadcrumbs::tailwind',

We'll look at how to publish and customise the template a little later.

Defining Routes and Breadcrumbs¶

Let's imagine we have the following structure to our application:

Home
    Help
        Contact us
        FAQ

If we're on the FAQ page, our breadcrumb structure would need to look like this:

Home > Help > FAQ

The package we're using allows us to define breadcrumb routes to link these pages together.

Start by creating a routes/breadcrumbs.php file, and then add the following:

use Diglactic\Breadcrumbs\Breadcrumbs;
use Diglactic\Breadcrumbs\Generator as BreadcrumbTrail;

Breadcrumbs::for('home', function (BreadcrumbTrail $trail) {
    $trail->push('Home', route('home'));
});

Here, we're pushing the homepage to our breadcrumbs stack. The first argument to the push method is the label we want to appear in our breadcrumbs when they're rendered, and the second argument is the route this should link through to.

We'll add some more breadcrumb routes here later.

Rendering Breadcrumbs in Blade Templates¶

To render breadcrumbs, head over to the homepage and do the following somewhere in the template.

<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
    {{ Breadcrumbs::render('home') }}

    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6 text-gray-900">
            {{ __("You're logged in!") }}
        </div>
    </div>
</div>

After you've added this, you should see something like the following.

Adding more breadcrumb routes¶

Let's add the full set of routes needed to display our breadcrumbs. With the example structure in mind, add the following routes:

use Diglactic\Breadcrumbs\Breadcrumbs;
use Diglactic\Breadcrumbs\Generator as BreadcrumbTrail;

Breadcrumbs::for('home', function (BreadcrumbTrail $trail) {
    $trail->push('Home', route('home'));
});

Breadcrumbs::for('about', function (BreadcrumbTrail $trail) {
    $trail->parent('home');
    $trail->push('About', route('about'));
});

Breadcrumbs::for('contact', function (BreadcrumbTrail $trail) {
    $trail->parent('about');
    $trail->push('Contact', route('contact'));
});

Breadcrumbs::for('faq', function (BreadcrumbTrail $trail) {
    $trail->parent('about');
    $trail->push('FAQ', route('faq'));
});

For the additional routes we've added, we use parent to push whatever comes before the route. This means the breadcrumb package is always aware of its parent and can figure out the breadcrumb trail to display.

Taking the deeply nested FAQ page as an example, once again output the breadcrumbs, referencing it by name:

<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
    {{ Breadcrumbs::render('faq') }}

    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6 text-gray-900">
            FAQ
        </div>
    </div>
</div>

When we open up the FAQ page, here's what we'll see:

Nice! Everything is linked up, and we're able to click through previous breadcrumbs to access parent pages.

Just remember to render the breadcrumbs on every page you want to see them, making sure you reference the breadcrumb route name.

Custom Breadcrumb template¶

You'll likely want to customise the rendered breadcrumbs, and there are a couple of ways to do this.

First, you're able to publish the views that the package uses by default:

php artisan vendor:publish --tag=breadcrumbs-views

This command publishes all of the views to resources/views/vendor/breadcrumbs. From here, you can delete the ones you don't need and customise the style you chose earlier in the config/breadcrumbs.php.

Another option is to create a partial out and reference that in the config.

php artisan make:view partials.breadcrumbs

Once you've created the partial, reference it in the config/breadcrumbs.php file:

'view' => 'partials.breadcrumbs',

It helps to have already published the default views so you're able to easily copy them over to your custom partial. From there, style it up as you need!

Conclusion¶

This is just the start of working with the laravel-breadcrumbs package, and you can do a lot more with it.

Now you know the basics, take a look at the docs to see all the available functionality for your specific use case.