Introduction

Breadcrumbs are a great way of improving the UI (user interface) and UX (user experience) of your applications and websites. They can help to reduce the chances of users getting lost and can make it easier for users to navigate around your site.

In this article, we're going to cover what breadcrumbs are, the benefits of them and how you can add them to your own Laravel website or application.

If you're interested in finding out different ways that you can improve your website, make sure to check out one of my recent articles called 17 Ways to Get Your Website Ready to Win.

What Are the Benefits of Using Breadcrumbs?

Breadcrumbs come from the story of Hansel and Grettel, which is a fairytale about a brother and sister who leave a trail of breadcrumbs when they're in the forest so that they can find their way back. In the web development world, breadcrumbs work in the same way; they leave a trail for us so that we know where we are in the system and how to get back.

You've almost definitely come across breadcrumbs before. For example, let's imagine that we're on a clothing site and that we're looking at the men's t-shirts. You might see something similar to this near the top of the page:

Home > Men's Clothing > T-shirts

This is a breadcrumb and it's showing us that we're on the men's t-shirts page. Typically, each "crumb" is a link that takes you back to another page.

Breadcrumbs are beneficial because:

1. They can decrease bounces rates and reduce the chances of users getting lost. If your users start to get confused about where they are in a website or application, they can become frustrated. This can sometimes cause them to leave. So, breadcrumbs address this issue by providing your user with a bit more visibility where they are.
2. They can provide a way for your visitors or users to "move up a level". For example, let's imagine that a visitor has searched for "men's t-shirts" in Google and has landed on your website's t-shirt page. But, now they want to look at the other men's clothing you offer. Instead of them having to go to your site's main navigation, they could potentially click up a level to "Men's Clothing". By presenting the breadcrumb in a simple way, you've allowed the user to navigate straight to their navigation without needing to hunt around.
3. If your breadcrumbs are set up correctly, they can be incredibly useful for SEO purposes. They help search engine crawlers to get a better idea of your site's page structure. This structure can then sometimes be shown in your search engine results.

If you're interested in reading about more benefits of using breadcrumbs, check out these two articles written by the Nielsen Norman Group and Infidigit.

How to Add Them to Your Laravel Website

To add the breadcrumbs to your Laravel project, we're going to be using the diglactic/laravel-breadcrumbs package. I've used this in quite a few projects now, ranging from small websites to fairly large applications, and I've always found it really easy to set up and easy to use.

Installation and Configuration

Let's start by installing the package using Composer with the following command:

composer require diglactic/laravel-breadcrumbs

Now that we've installed the package, we can publish the config file using the following command:

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

You should now have a newly created config/breadcrumbs.php file that you can use to edit the package's config. In this particular article, we're only going to be bothered about the view option in the config file. But, feel free to explore the file though and change it to suit your needs.

By default, when we output the breadcrumbs to our page, the package will style them using Bootstrap 5. So, if you're styling your UI using Bootstrap 5, you shouldn't need to make any changes straight away.

However, if you're using Tailwind for your CSS, you can update the view in the breadcrumbs.php config file so that the package uses Tailwind to render rather than Bootstrap. In this case, you could update your config file like so:

return [

    // ...

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

    // ...

];

Using Custom Styles for Your Breadcrumbs

In my personal opinion, I quite like the default styling of the Tailwind version of the breadcrumbs. However, if you find that you want a more bespoke looking design, you can easily add this yourself.

First, you can create a new resources/views/partials/breadcrumbs.blade.php file. The documentation provides a handy little template that you can get started with by dropping straight into this file:

@unless ($breadcrumbs->isEmpty())
    <ol class="breadcrumb">
        @foreach ($breadcrumbs as $breadcrumb)

            @if (!is_null($breadcrumb->url) && !$loop->last)
                <li class="breadcrumb-item"><a href="{{ $breadcrumb->url }}">{{ $breadcrumb->title }}</a></li>
            @else
                <li class="breadcrumb-item active">{{ $breadcrumb->title }}</li>
            @endif

        @endforeach
    </ol>
@endunless

You can now add your own styling and structure to this template and make it fit more with your application or website's design. In past projects, I've used this approach so that I could add breadcrumbs using styling from Tailwind UI.

All that's left to do to use our custom style is to update the config file. We just need to change the view field to point to our new Blade file that we've just created. Here's an example of how it might look:

return [  

    // ...

    'view' => 'partials/breadcrumbs',

    // ...

];

Defining the Breadcrumbs

Now that we've got the config for the package set up, we can start defining our breadcrumbs ready for displaying.

Before we start defining any breadcrumbs, let's take this basic, example routes/web.php file:

<?php

use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;

Route::get('/users', [UserController::class, 'index'])->name('users.index');
Route::get('/users/{user}', [UserController::class, 'show'])->name('users.show');
Route::get('/users/{user}/edit', [UserController::class, 'edit'])->name('users.edit');

The package works by us defining a breadcrumb for each route that we have. So, in this particular example, because we have 3 routes, we'll need to define 3 breadcrumbs.

To do this, we'll first need to define a new, empty routes/breadcrumbs.php file. Once we've created it, we can add define our first breadcrumb:

use App\Models\User;
use Diglactic\Breadcrumbs\Breadcrumbs;
use Diglactic\Breadcrumbs\Generator as BreadcrumbTrail;

Breadcrumbs::for('users.index', function (BreadcrumbTrail $trail): void {
    $trail->push('Users', route('users.index'));
});

Let's quickly look at what the code above is doing. We're basically defining a breadcrumb for the page that you can access via the users.index route. We're then telling the package to push Users on to a stack for displaying and to display with a link to the users.index page.

We'll define our other routes and take another look at what our breadcrumbs file might look like:

use App\Models\User;
use Diglactic\Breadcrumbs\Breadcrumbs;
use Diglactic\Breadcrumbs\Generator as BreadcrumbTrail;

Breadcrumbs::for('users.index', function (BreadcrumbTrail $trail): void {
    $trail->push('Users', route('users.index'));
});

Breadcrumbs::for('users.show', function (BreadcrumbTrail $trail, User $project): void {
    $trail->parent('users.index');

    $trail->push($user->name, route('users.show', $user));
});

Breadcrumbs::for('users.edit', function (BreadcrumbTrail $trail, User $project): void {
    $trail->parent('users.show');

    $trail->push('Edit', route('users.edit', $user));
});

In the lines above, we've defined two more breadcrumbs for the two other routes.

For the first route, we've added a breadcrumb which will push the user's name on to the stack as a link to the user's 'show' route. If we were to navigate to this route in our browser, the breadcrumb would have the following structure as an example:

Users > Ash Allen

For the second route, we've added a breadcrumb which will push 'Edit' on to the stack as a link to the user's show route. If we were to navigate to this route in our browser, the breadcrumb would have the following structure as an example:

Users > Ash Allen > Edit

Displaying the Breadcrumbs

We're nearly there! Now that we've defined our breadcrumbs, we can now output them to our page for our visitors to start using. To do this, we just need to find a place in our Blade view file where we want to render them and then add:

{{ Breadcrumbs::render() }}

That's it! That's all you need to do!

You should now be able to see your breadcrumbs displaying on your page and should be able to click through the different links to navigate through the different pages.

The package is quite thorough, so I would definitely recommend checking out their documentation and looking at the other cool things that you can do.

Conclusion

Hopefully, this article should have explained the benefits of using breadcrumbs and how they can help your users. It should have also given you some insight into how you can add them to your own Laravel applications pretty easily.

If this post helped you out, I'd love to hear about it. Likewise, if you have any feedback to improve this post, I'd also love to hear that too.

If you're interested in getting updated each time I publish a new post, feel free to sign up for my newsletter.

Keep on building awesome stuff! 🚀