On this Craft Cms lesson we install the Navigation plugin and setup the footer using custom nodes.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
All right, guys, let's jump into the footer navigation. I've opened up our includes footer file, and we're going to focus on the copy in the bottom. So the first thing we want to do is create a custom field, a plain text field, and we're going to assign that to a global set under settings we go to globals and create a new global set.
We assigned that custom field to that global set. And then from there, we're going to just add in the copy in our globals. You save it. We jumped back to our code and we want to just simply add our variable, starting with the global set, this case general.footer copy. And that's it. We refresh our page and we should have that ready to go.
Now I want to install a plugin called navigation. This one, you can also try this out. It's really cool. It has some really interesting features for us to use. The way I want to install this is using the composer install, because we are used to just simply clicking try, but I want to teach you that you can actually access your nitro server, opening up your terminal.
And once you're inside you server, you can access the Fort rabbit folder. Once we're in there, we can call in composer require, and then the name of the vendor in this case, the verbb/navigation. So you can pull that from the documentation. All right, and now you'll notice that it shows up in the left navigational bar.
Let's go ahead and create our first navigation. Let's just call this footer for testing this out, don't worry about the settings just yet. When we go inside the actual footer, you're going to see that this works based on nodes. So similar to how a tree structure works, you create as many notes as you need.
And it allows you to add entries in multiple ways. So right here, we're selecting entries from our structures so we can select multiple of them at the same time. Simply by highlighting them and then boom, they get added as nodes within this little footer group. You can also drag them around so that you can have a specific order.
And it just gives you some flexibility as to how you want to display these navigation items. And then you can also add category links. So, if you have any category or assets or even a custom URL, maybe you want to link them out from a different page. You can also click on the little cog wheel next to the node to get additional settings.
So you can have a suffix. You can have it open up to any window. If you don't want to worry about the class names you can add it through here. And even at some additional attributes. Okay. So you're probably wondering how do we display these nodes in our front end template? Well, let's jump into the documentation.
So in navigation, documentation works similar to how querying data. So we're going to copy and paste this into our footer, creating a variable called nodes. Notice that it has a handle, that little handle we're going to change it to the footer we just created. So that's the group we made. And then it gives us a simple syntax code, which is wrapped inside the Nav object.
And this nav, you can think about just like a for loop, right. It's nav, and then has a variable inside of the nodes, which is the actual variable that we created above. And then all we have to do is copying that little node.link tag because. Essentially navigation, the plugin is taking care of all the syntax.
You don't have to worry about creating hrefs anymore. If you have created a tree with parents and similar to how the structure works would copy in inside the LI. So the first listing item you would copy and paste this little, if there's children then output any children available. So just like that, we are going to be able to output the footer group we just created. All right, but if you do want a little bit more control over the code, there is the custom rendering. So essentially works the same, except here you're going to need to have your own code. So you'd have to, instead of using that, simply replace the value inside the href. Same concept here we have the object, which is node the variable from the for loop.
And then the parameter URL and same here goes for the title, node.dot title. So I'm just copying this from their documentation, pretty straightforward. And then for the children, it's pretty much the same. So it does give you some control over that. But again, you have to remember, you also have access to the attributes settings.
Remember the little cog wheel that we saw in the navigation. You can actually see it there adding attributes or class names. It's actually quite flexible and powerful. So just like that, we have our footer navigation happening now that I noticed legal is not needed. So I'm just going to go into our footer navigation group and remove that and let's make sure we rename the groups according to this section or the little column of where we're going to display these nodes.
So in this case, I've changed the name of the group. So I have to go in, I have to go into the syntax and change the handle. There we go. So that looks good. So if you decide to not use the plugin, you can also use the default page structure syntax. Over here in the knowledge base within Craft we have some basic syntax examples. We can simply copy that code and then bring it over to our footer and you'll see that everything is pretty much the same, except here you're calling for the section, and in this case, we would call in the site map, which is the structure section that we created, and similar to how navigation works it's all within a loop. So we have for page inside the pages variable, and then all you have to do is use the page.get link parameter within the URL. So the only bad thing here is that you have to use the structure to create your navigation. And we can add custom links or categories, which is always nice to have.
So you can see here that the script that I added it's limiting to that level. So the very first level, right there, you have level one of the structure. If you remove that, and then we click refresh, we're going to be able to access the entire list of links that we have from our site map structure.
All right, guys. So we've covered both the default navigation structure, syntax and the navigation plugins syntax. I think we're ready to move to the next lesson of creating a site map.xml.
All right, I'll see you there.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS