Nested Categories and Breadcrumbs with Laravel
Playing
01. Introduction and setup

Episodes

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

Transcript

00:00
So how do we create nested categories in Laravel and also show breadcrumbs along with them categories, the deeper we get?
00:08
Well, that's exactly what we're going to look at in this course. Let's go ahead and look at a demo of this. We'll get a really quick project set up. And then for the rest of the course, we'll look at creating out these
00:18
nested categories in the database, going ahead and bringing in breadcrumb functionality and also doing some customizations and look at some other tips as well. Okay.
00:28
So I'm going to go ahead and click on shoes here. And as you can see immediately, we're put into the shoes category and this shows the two subcategories underneath this course, we can go back to the categories page that we were just on.
00:39
And we can go back to the dashboard as well. I'm using the dashboard as an example, but this would likely be your homepage. Okay. Let's go into shoes then into boots.
00:48
And then we've got even more subcategories in here, which we would potentially list out products in. And we're all the way into the last in the list. And of course we can just go back to any of these categories to continue
00:59
browsing, and this really helps usability of when you have very nested deep categories in any of the sites that you're building. Okay. So that's pretty much what we're looking at.
01:09
Let's go ahead and set up a fresh project here so we can get started. And I'm going to show you how to achieve everything we've just looked at. So if you already have an existing project, of course, feel free to skip on to the next episode, but let's get a quick project
01:21
set up so we can get this working. Okay. Let's use Laravel's installer to create our new projects. And I'm just going to call this breadcrumbs.
01:29
We're going to choose the Laravel breeze starter kit just because it gives us some templating and also includes tailwind as well, which we're going to be using to start this up. You can customize the styling of whatever you're building with the breadcrumbs,
01:40
but we'll go ahead and use tailwind for now. Okay. So we're just going to choose the blade with Alpine option here, but of course this is going to work if you're using live wire as well, and let's go ahead
01:51
and say that we don't want to use dark mode and go through the rest of these options. Okay. We'll go ahead and choose MySQL as our database driver, and let's go
01:58
ahead and run the default migrations with this. And once this finishes, we should be good to go. Let's just have a look at our database really quickly. And yeah, that looks like it's worked.
02:06
Let's head back over and just wait for this to finish and get this open in our editor. Okay. So once that's done, let's open this up in our editor and we should be good to go.
02:15
Let's go over to the browser and open this up and we'll go ahead and register an account and get into the dashboard. Of course, if you are doing this in an existing application, you might not want functionality to be only available when you're signed in, but we'll use this as
02:30
an example. Okay. So we're into our application. Let's go over and look at using nested sets for our categories.
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!