 Hello everyone, welcome to a tutorial about how to create a menu using the navigation block. I'm using local to create a demo website using the 2024 default theme. At the time of this recording I'm using WordPress version 6.4 and the Gutenberg plugin. The objectives of this tutorial are to learn the different blocks that can be used within the navigation block, to have the user feel more at ease when creating a website's navigation menu, to increase awareness of UX UI design principles and accessibility in how these things make navigating a website easier to use. Here is a description of the items I will be covering. Adding pages to a current navigation, setting up a new navigation menu, how to move navigation items to different locations, how to create a second navigation menu to use in a second location such as the footer or sidebar. Adding pages to a current navigation, we're going to start at the dashboard and we'll go down to the appearances and you'll see that the editor is there. We'll click on that and it's going to bring us into our design section. The design section has a series of different areas that we can focus on. We're going to add pages so we're going to go to our Pages tab. We have a couple defaults already there. On the front end as you see over in the preview we only are showing the sample page. We're going to click on the plus sign at the top and we're going to add an actual home page. This gives us the editor for that home page. If you look on the right side you'll see that the status is still in draft. When things are in draft then they won't show up on the front end. We need to click on the draft and it'll give you a series of different options. We're going to click on the published and then go back up to the top and hit save. Hit save again for the home page. Now that we see the status is published we're going to go back and click on the open navigation. We're going to go back to our pages. We're going to add one more page. We're going to click and add an about page. We're going to create the draft. We're going to go over to our status. Change it to published. Go back up to the top. Hit save. Hit save for the about page. Now you can see that we have the three different pages there. If we go up to our front end and I'm going to refresh it we can see that we have our sample page and then the two that we added. How to move navigation items to different locations. If we go back to the dashboard and look at the front end we have our menu items kind of not in the right place. So we usually like to have the home as the first one. What we're going to do is we're going to go into the dashboard and go to appearance. Go to editor. We'll go into the navigation because we just want to focus on those three things right there. Click on the edit button and you see that we have that. I'm going to make this a little bit bigger if I can and zoomed in. If you look on the right side we have page list and then the list of items there. What we want to do is we want to click on here and it's going to give us a toolbar that says to edit. Then if we look over here the page list there is a area that says edit this menu. This page list is synced with the published pages of your site. Detach the page list to add, delete or reorder the pages. What's going to happen is that we're going to see the page list block is going to disappear. We're just going to have our list of menu items. We're going to click on edit and a window pops up to kind of restate that. We're going to detach those menu items from the page list block. Detach. Now if we look at the list view under navigation there is no page list anymore. We can take these and if we click on home we have some tools that give us this so that move right, move left, the little arrows will give us an easy way to do that and then if we click on the about we can move that to the backside if we want to do that. That's an easy way. The other way is if we go into the list view click on that and we can just bring it down. There we go. If we look over here the home page is over there. So there's a couple different ways. This is probably the easiest way because the toolbar is right there and we can set that back up. Just make sure that you click on save to finish because it will then update the navigation. You are done with that part. Setting up a new navigation menu. We'll go into the navigation and we'll click on the little pencil icon which is the edit. What we're going to do is we're going to add our pages from here. We're going to do a home page and we'll create a draft. We'll add another one. We'll create an about page and create a draft and then for our third one we're actually going to add a new feature which is a button with a contact option. We'll create the draft page for the contact and what we can do is we'll click on that again and the toolbar that comes up over on the side. Let me increase this size there. We're going to go to the toolbar and click on that first icon that looks like a little paper. We can transform it into different options. So we do have the option of a button so we're going to click on that. We've created a contact button on that. We're going to go over and save. Now remember that two of our pages are still in drafts. If we go to the front of our site and we refresh we do have the contact button but we don't have our other two pages. A way that we can do that is to go into our dashboard and we can go into pages. Click all pages. You can see that we have all of the items that we inputted are about our contact in our home. We go into edit the page. We're going to the publish button up at the top. We can go back and now you see that the draft is off. We'll do that again with our contact to publish that and then we will go into the home edit and publish that. We should be able to go to the front end of our site refresh the page and we have a multiple of things. Why is this because of the fact that we still have the page view blocks? What we're going to do is we're going to go into our editor because of the fact that we had added those pages from over here. We're going to go into the navigation. You see that we have the page list and then we have these items here too. That's what it is because if we click here we have all of those other pages. We're going to go into our navigation. We're going to click here and we're just going to delete this page list. We'll click on the three dots. Scroll down to the bottom of that drop-down menu to delete the page list. Now you can see our menu has the home, the about, and a button. You can hit save. You can go back to the front end. We have our three menu items. Our home page, our about page, and our contact button. How to create a second navigation menu to use in a second location such as a footer. We're going to look at the footer. We're in our dashboard and we'll scroll down to appearance. Go over to the editor. We will go into the navigation. At the top you'll see the three dots called action. Click on that. We're going to duplicate our navigation menu for right now. This gives us a navigation copy. We can go to the three dots again which are action and we can do a rename. A window pops up called rename backspace. We're going to name it the footer menu. This can be a menu that might not have all the options. It might have different options of different pages or it might just be in a different order as opposed to your main navigation. We've created the footer menu and we're going to edit this. What I want to do is I want to take out the contact button and I want to add a blog page. I'm going to click on the contact and click on the three dots in our toolbar. We're going to just delete that and we might have to do something else here because the button is still there. We have to remove the button. I have the home and about and I want to add a blog. I can click on the plus sign. I can type it in or I can see that the first page that's listed is the blog so I can click on that and then hit save. Save again. It's going to save it to the footer menu under navigation menus. Double check on that. We can see up here that we have the footer menu there. Then how do we use it? We can go back into our navigation, go into our templates and go into the blog home. We're going to edit this and if we click on the list view we see that there's a footer already. We want to add that navigation menu there. This has an extra block down here with just a paragraph so we're going to add it in there. I'm going to click on the three dots of that group. I'm going to open up that group and I'm going to click on the three dots of that paragraph that's already there and add before. What I can do is then click, I'm going to backspace, click navigation and add a navigation to it. It actually found that the right template, believe it or not, for the footer and it did it automatically to the home about log. If we scroll on to the right side where the block information is, we have navigation, we have a menu and there's three dots over here with that menu. If we click on that, we can see the different menu options so we could actually put the navigation menu with the contact button or we can go back and click on the footer menu. That's how you would use a second menu in a second place. Another new feature of 6.4 is submenus. Start at our dashboard, go to appearance, go over to editor, click on navigation and go to the main navigation. I've set up a third page called seasons. We're going to click on the pencil to edit that. Now if we hover over and click on that, we can see in our toolbar some different tools and one of the tools is add a submenu up here. What I'm going to do is I'm going to click down here and make a custom link. I'm going to write fall and I'm just going to click on the submit button here. I'm going to add another and this time I'm going to add a page so I've already made a page called spring. We'll click there, click away from there. You can see on our dropdown we have fall and spring. I'm going to go over to save and then save again for the navigation. If we look over at our navigation block, we can see what's listed and we see that there's a custom link called fall and a page called spring. If we go to the front of it and I refresh that page, we see that our seasons, if we hover over we have the dropdown fall and spring. Just a few of the new features to the navigation to help you make it a little bit easier. To view more tutorials, lesson plans, and workshops, please visit learn.workprime.