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
08. Custom breadcrumb templates

Episodes

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

Transcript

00:00
Let's take a quick look at how we customize the views for our breadcrumbs using this package. Let's go over to our terminal and we're going to go and publish the tag for breadcrumbs. But this time we're going to publish the views. Now, what this will do is it will create out in the views directory, a breadcrumbs directory.
00:19
So let's go over to resources, views, and let's go to vendor and breadcrumbs. So you can see that this is published everything in here. So what we can do is just pick one of these and go ahead and modify it. There's another way to do this, which I'll show you in a minute, but let's just start out with this one for now.
00:35
Okay. So we're using Tailwind. Let's go ahead and customize the Tailwind one. And let's say we just want to get rid of the gray background here.
00:42
We'll just do that as a start. So now that we've done that, if we head back over, sure enough, this has changed over. So what you could do is go ahead and get rid of all of the other ones that you didn't need and just focus on the few that you need. Now, if you want us to create a separate file in a completely separate directory, you can do that as well.
01:00
Let's grab everything that we've got in this template and move it over to our own view. So let's go and create out a view and I'm going to go ahead and put this inside of, well, let's just call this breadcrumbs. We'll just keep it simple. So now that we've created that, let's go over to this breadcrumbs directory, paste this in, and let's use this now as the view, just so we know that this is our new view.
01:24
I'm just going to say our view at the top and we'll get rid of that in a minute. Okay. So remember a little bit earlier, we published the breadcrumbs config. Let's go over to this.
01:33
And now what we can do rather than reference this from the package, we can just reference our template directly. So if it was in a sub directory, we would use the dot notation here, but for us, we just put it in the main views directory. So we're just going to reference breadcrumbs. Now that we've done that, we come over and give this a refresh.
01:49
There we go. We're now using our own template. So let's go over and just get rid of the part that we added. And there we go.
01:56
We can now customize anything about these breadcrumbs and you can look through this and pretty much just figure out everything that you need to add. If we have this in the last loop, we add a slash. And then up here we have, if it has a URL, we want to show a URL. Otherwise, if it doesn't, so you can just go through this template now and customize anything you need to about your breadcrumbs.

Episode summary

In this episode, we dive into customizing breadcrumb templates in our Laravel app. First, we head to the terminal and publish the package's breadcrumb views. This process copies the package-provided templates into our resources/views/vendor/breadcrumbs directory, so we get easy access to edit them.

We then open up the published templates, choose the Tailwind version, and make a simple change — like removing the gray background. After saving, we refresh the browser, and voilà! Our customization is visible. We also discuss cleaning things up by deleting any breadcrumb templates we don't need.

Next, we explore a more advanced approach: moving the breadcrumb template out of the vendor directory and into our own views folder (resources/views/breadcrumbs.blade.php). We update the breadcrumbs config to point directly to our new template. After a quick page refresh, we confirm it's working by adding a marker to the template.

To wrap up, the episode explains how you can fully tailor the breadcrumb template: add or remove elements, tweak the logic, and make the breadcrumbs match your design perfectly. You're now free to fully control the look and feel of your breadcrumbs!

Episode discussion

No comments, yet. Be the first!