Nested Categories and Breadcrumbs with Laravel
This episode is for members only

Sign up to access "Nested Categories and Breadcrumbs with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
06. Setting up Breadcrumbs

Episodes

0%
Your progress
  • Total: 46m
  • Played: 0m
  • Remaining: 46m
Join or sign in to track your progress

Transcript

00:00
Outputting all of our nested categories, especially when we're in this view here,
00:04
is going to get a little bit confusing. We don't know where we are. We don't know which overall category we're in. So let's go ahead and implement set up breadcrumbs.
00:12
We'll do this for the dashboard first, and then we'll look at how we can use the nested set to build up all of the breadcrumbs for each of the category show pages. To implement breadcrumbs, we're going to use the Laravel breadcrumbs package. Let's go ahead and get it set up and see how this works.
00:28
And then we'll go ahead and do some more with it. OK, so let's go down to the installation section here and let's get started. OK, so of course, we're going to go ahead and pull the package in. Let's do that first of all.
00:40
And now we need to create out a roots breadcrumbs file. It looks something like this. Let's go ahead and do that. So we're going to go over to our roots here.
00:48
We'll create out a new PHP file, of course, called breadcrumbs.php. And once we've done that, we can just start to define this out. Now, we don't need to use these imports, but it helps with our editor. So let's go ahead and copy and paste these in and just leave them at the top.
01:04
OK, so next up, we're going to go ahead and pull in the config, which is really important if we want to customize things. So let's go and publish the configuration file. Take a look at that in just a second.
01:15
And really, there's not much else we need to do here. Let's cover the rest here. OK, so the first thing we'll do is look at this config. So let's go over to config and breadcrumbs that's been published
01:25
and let's see what we need to do. Now, the most important part of this is customizing the view. By default, this is set to Bootstrap 5. Now, we're using Tailwind in our application.
01:35
So I'm going to go ahead and change that over to Tailwind. So the styles look fine. Later on, we're going to look at customizing the entire view based on what you want to style it as.
01:44
So we can use anything in there. OK, I think that's pretty much all we need to do for now. Let's create out our first breadcrumb. So we're going to go ahead and use the breadcrumbs facade here.
01:56
And we're going to choose which page we want this to be for. We're just going to do this for the dashboard now. And then we'll go over and look at how we do this for categories later. So let's just do this for dashboard.
02:07
Now, this is going to be the name of what we reference it as. And then we have a closure in here, which allows us to push any of the breadcrumb trail. So we're going to go ahead and type in this as breadcrumb trail.
02:20
You don't need to do that. And then we get trail in here. So for the trail, we can do pretty much anything in here. But for the dashboard, we only just have one single page.
02:30
So let's go ahead and push on. And here is going to be the name of how this is displayed. So this is just dashboard. Now, our breadcrumbs need to know how to link through to the dashboard.
02:39
So we're going to pass in the full URL for this in here. And we can just use the root helper to generate out the URL. OK, now we've done that. We are done.
02:48
We've created our first breadcrumb. Let's go ahead and output them on the top of the dashboard. So let's head over to our dashboard.blade.php file. And let's do this just above the container in here.
03:00
To do this in Blade, we're going to go ahead and use breadcrumbs exactly as we did before. And then we're going to render out these at the point that we want to see it. So in our case, it's going to be dashboard. That's what we called it.
03:14
Now, once we've done this, and as long as npm run dev is running, you should now see the breadcrumbs listed out. At the moment, this isn't too helpful because we've only got one page here. But once we go over to look at categories in the next episode,
03:29
we could set the dashboard as a parent to the dashboard page. At least now that we've got the breadcrumbs package installed, we know how to define out a breadcrumb route. Let's go ahead and look at some more advanced usage of this package.

Episode summary

In this episode, we tackle the problem of navigation confusion in our app by setting up breadcrumbs. Breadcrumbs make it easy for users to know where they are, especially when dealing with nested categories and lots of different pages.

We start by installing the Laravel breadcrumbs package. After pulling it in, we create a new breadcrumbs.php file in our routes and start defining our breadcrumb trails. Next, we publish the package config so we can tweak things like what the breadcrumb UI looks like – since we're using Tailwind, we make sure the config matches our chosen CSS framework (instead of the default Bootstrap 5).

With the setup out of the way, we create our first breadcrumb for the dashboard page. We show how to name it, push items onto the trail, and generate the right URL. Once that's ready, we jump over to our Blade view and render out the breadcrumbs just above our main container.

At this point, we have a simple breadcrumb for the dashboard. In the next episodes, we’ll expand on this and set up more advanced breadcrumb trails, especially for nested category pages using the package, so navigation will stay super clear no matter how deep users go.

Episode discussion

No comments, yet. Be the first!