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
07. Displaying ancestor breadcrumbs

Episodes

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

Transcript

00:00
Let's create out a new breadcrumbs entry for our categories. So let's go ahead and create this out as categories and we do exactly the same thing here. We have a breadcrumb trail which we can either push or set a parent for. Let's go ahead and call that trail again and let's start to get to work.
00:17
So we know that for the main categories page we want to push in something called categories so we can get back to the categories index. Let's go ahead and define out the route here to point to our categories index page. Okay, so we're going to come over to our categories index. Let's pull that up and let's do exactly the same thing up here just above the container.
00:39
So let's say breadcrumbs and render and let's render out the categories just inside of there and we'll get rid of that. Okay, if we head over to the browser and hit categories, there we go. We've now got categories. Let's first look at pushing a route page to this or a parent page. We're going to have this as the dashboard, but in reality, this is probably going to be your homepage.
00:59
So if we come over to our breadcrumb routes again, what we can also do with this trail is define a parent. So the parent of the categories in our case is just going to be our dashboard. Now we've already got dashboard to find out so we don't need to define out the name or the route. We just want to say that dashboard which we've already defined up here is the parent of categories.
01:22
Just by doing that, when we come over, you can see that we've already got this parent in here. So effectively, we can go from our dashboard over to categories, but we can go back to our dashboard again. So everything is nicely hooking up. Now, the more tricky part about this is how do we push once we're in to say new in the breadcrumbs to this?
01:42
Well, we can actually reuse the same breadcrumb trail for each of our category show pages. Let's go ahead and add that in and then we'll look at pushing ancestors. So if we head over to our show.blade.php file, let's go ahead and bring this in up here. So breadcrumbs, render and categories and just let's make sure that's working.
02:03
So let's go into a nested subcategory here and everything is good. So let's think about this by just going over to the categories page. If we are in new in or sale under boots, which is under shoes, when we display this now breadcrumb list, we want the ancestors. So we want the ancestors of new in which is boots and shoes
02:23
and we want to iterate over them and we want to push this to our category breadcrumbs. So to do this, what we can actually do when we set up our breadcrumbs, we can also pass in any dependencies that we need. So when our breadcrumbs show, we need inside of our breadcrumbs route to be able to get access to the ancestors.
02:45
So we want to accept in a category directly into here. So let's just leave that as it is, make sure everything is working and then we'll iterate back over our ancestors. So for our category show page, we know that we have got a category that we want to display. Now, if we head over, you'll notice that we've got an error here because when we are defining our breadcrumbs,
03:07
sometimes we don't get a category passed in. We're just on the main category page. We don't have this available. So what we can do is set this as an optional type and then we can set the value by default to be null. And that means that we don't need to pass it in.
03:22
So now we can go over to our categories index page. We can go into a subcategory. And of course, we can grab this out. Now, at the moment, this still isn't working. We just need to make sure we import the model here. So let's go and put in our category model and we should be good.
03:36
OK, so we can come over to our category index and not have that category. But when we're in a subcategory, we do have that category available. Now we can grab the ancestors for this. So in here, what we want to do is first of all, check if we have a category,
03:49
because otherwise we don't need to push any ancestors for this. And then we can just do a for each over each of the ancestors. And to do this, we use category ancestors and we can just access that as a property and everything should be egoloaded. We're going to call that ancestor and then we just need to push each of these ancestors.
04:08
So we're going to again use the trail here to push in the ancestor title, because remember, that's now dynamic. So we can just grab that from the model and then we want to push in the route. So this is again going to be categories show and the ancestor is going to be the thing that we want to pass through to link up. Let's go over and have a look at this. So I'm currently within boots and new in.
04:31
And you can see that it's not quite working because we're on boots. But we do have shoes as the category before that and then the category. So we can now get a nice breadcrumb trail. The only issue is that we are grabbing the ancestors.
04:45
But what we really want to do is grab the ancestors and the current thing that we're viewing for that. We can use ancestors and self. So when we use this ancestors and self method, we need to pass in the current thing, the self. This is the category ID. What this will do is it will now include the current category we're on and it will show the current category in the breadcrumb,
05:11
but also show all of the ancestors. Let's go over. And there we go. So we're in new in, but we can go back to boots. Now we can go back to shoes, back to categories. And of course, we can go into any of these subcategories and all of the ancestors are always going to be pushed as part of that trail.

Episode summary

In this episode, we focus on displaying ancestor breadcrumbs for our categories. We start by setting up a new breadcrumb entry for the categories page, making sure users can always find their way back to the main categories index. We walk through defining and rendering the breadcrumbs component, hooking it up so that the dashboard acts as the parent breadcrumb of categories.

Next, we dive into making breadcrumbs dynamic for subcategories and category show pages. We look at how to pass a category model into the breadcrumb and discuss edge cases—sometimes we're on the main categories page with no category selected, while other times we're viewing a subcategory and need to display its ancestry.

We implement logic to automatically push ancestor categories to the breadcrumb trail. This way, when navigating into deeper categories or subcategories (like "Shoes" > "Boots" > "New In"), the breadcrumb dynamically reflects the entire path, letting users easily jump back up the hierarchy.

By using the ancestorsAndSelf() method, we make sure both ancestors and the current category appear in the trail, giving users full context no matter how deep they go. By the end of this episode, the breadcrumb navigation feels much more intuitive and useful for your app!

Episode discussion

No comments, yet. Be the first!