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.
9 episodes• 46 mins

Overview

Let’s master creating nested categories and displaying breadcrumbs for easy navigation.

We’ll start by setting up and seeding nested categories, recursivly iterating over and displaying them with a nested Blade component, then render and customise breadcrumbs to show a trail of category ancestors.

Finally, we’ll finish up with looking at using wildcard routes to show each category slug for perfectly clean URLs.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!