How to Create a Menu with the Navigation Block

Are you ready to create a navigation menu? In Block Themes, you will use the Navigation Block to create a navigation menu while designing your site.

Learning outcomes

1. Set up a navigation menu with a block theme.
2. Arrange Navigation block items in a block theme.

Comprehension questions

1. What kinds of blocks can you add to a navigation menu besides links?
2. Where do you go to create a navigation block?

Transcript

To create a navigation menu using a block theme, we’ll need to do things a little bit differently than we did with classic themes. So to begin with, we’re going to use a block theme. In this case, we’re using your 2022. Before that default themes such as 2021, managed navigation menus in a different way. So we’re going to test this using a default block theme.

Once we have that activated and installed, we’ll go to Appearance Editor. And from there, you’ll see this is the way that my editor looks. Now I’ve done a little bit of preview work with demo content on my site. But what you see in the top header area is about the same as what you’ll see when you get started.

Using List View with Navigation Block

I’m going to turn on the List View in the top navigation that looks like the three horizontal stack lines that are slightly askew. And inside of that I can identify all of the blocks. I find this to be really helpful when I’m trying to select very specific things.

So I am clicking on the navigation option. And you’ll see that that’s showing me in the top header area that I can either select an existing menu or start with something from empty.

Existing Menus

If I select an existing menu, I can see that I have a few menu options that have already been created using a block theme. Also, I have some leftover navigation menus that came with previous themes that I’ve used inside of classic themes. So I can select either of those.

If I were to select for instance short, you’ll see that the navigation menu displays. And on the left hand side, I have specific blocks available to me with the drop downs showing underneath and I can get in edit and modify any of those.

Now I’m going to show you what happens if I select an existing menu that when it enters in looks like these are all individual links. But if I look on the left hand side, under List View, I see it says page list. page list means that my theme is treating this like it is all one block right now. That block is called page list. The links would show up individually on the front of site for website visitors. But according to my view, I can’t get into the individual ones and modify those. If you find this happens to you simply select edit and convert these from a page lists block to all the blocks. And now you can get in and edit individual ones or remove specific ones from your navigation menu.

I’m going to undo a few steps to get us back to this point. And for undo I’m using Command Z on a Mac, but Ctrl Z on Windows will probably work just the same. So I am back at this select menu. And that was how to set up an existing menu.

Create New Menu

If I were to create a new menu, I’m going to click Start empty. And when I do it begins with a plus symbol. I’m going to search for Front, because I know I have a page called front page. And I will select that now I’m not clicking on anything else. But on my keyboard, I’m going to hit Enter. And that gives me the chance to add an additional block. And maybe I see one here that has recently been updated. And I could select that option. And now for my next page, I’m going to select Contact

You’ll see that it doesn’t know the contact page. Here, I could either hit enter if I think that’s the right link, which it’s not. Or I could create a draft page, that would automatically start a page called contact for me. And if I needed to, I could edit the name of the link here. And I could also edit the address of that link. Both of these are good for now. So I’ve begun to draft for a page called contact. That’s great.

Add Additional Menu Items

When I have this blinking cursor, I’m going to the end of the block and I’ll hit enter again. And now it’s going to add an additional link. If you hit enter in the middle, sometimes it just breaks wraps the text around a little bit. That’s not what I’m after.

Here, I could choose to add in maybe some social icons, like go to my Facebook page, go to my Twitter account, something like that. I’m going to select the Search option. And I love that this is built into the navigation menu. So in this location I could type in a placeholder like the word search. And then when people come across that in my navigation menu, they can enter their information in and search to find whatever they want throughout my site. So that navigation is coming along well. I have a few options in this search block while I’m on that specific block of where I would like the button to be if I want it on the outside if I want it on the inside. If I don’t want the button, you have choices.

An additional tip for you here is that if you would like to move this toolbar out of your way, you can go to the options and enable top toolbar. In the top option, it says top toolbar, how convenient.

Submenu Navigation

So I want to do this while I am creating some sub navigation menu items. So I’m selecting the block where I would like that sub navigation to appear. And I have an option to add sub menu. That’s the same toolbar as was floating below, it’s just out of my way now. So in this location, I can add in, for instance, maybe I would like this page to appear below. And then if I want a sub none menu off of that, here, I could go in and select some other page.

And you see that I can keep this chain going of adding a child of a child of a child all the way back up. So that begins the process of adding a sub navigation menu.

Adding Categories and Tags to the Navigation Menu

If you would like to add in a category or a tag, a good way to do that is to go back to your posts and look over your categories. So I want to post categories from the admin dashboard in a separate tab. And here I see that I’ve got a category called block, and I’ve got quite a few things that are inside of it.

When I select view, I can copy and paste that category link that appeared in my address bar. And if I would like to make that be one of my sub menu items, I can do that. And now I’ll hit enter. And so I might want to rename that to block category. And apply that link again, there’s the link. Great. So I have a block category created, I have some child menu is available as well. Another thing that you might come across is that if you would like to move this navigation menu, out away from the other things, maybe I want to put it at the top of my header by itself. And perhaps in the location down here. Maybe I don’t want the group and all of the row and all the things. So I’m actually going to remove that.

Add a Site Icon to Navigation Menu

And now my navigation menu is at the top of my site; I have a few things that I could do in here. So after I have the let’s collapse the Block Pattern after the block pattern, if I would like to add in a block or site logo, I could do that right in the middle of my navigation bar. And I will select this icon for the site logo. Look through my Media Library web already uploaded it. And now I have a site logo right in the middle of my navigation bar. Let’s bring that list view back so we can see, well, yeah, there is that site logo. So my navigation bar is starting to come together, it’s great.

Navigation Block Options

I’m going to bring that top toolbar back into where the navigation menu is. And from here, I want to select the entire navigation. You’ll see that we’ve got that circle option. So if I’m on an individual thing, and I click select navigation, it will select the whole navigation. You can also get there from the List View as well. In this area, you could choose to center your navigation, when you have the entire navigation selected, you could say I want to justify the item entirely left right center, maybe I want to space it out so that I’ve got some space between the items. And that’s good too.

I also have the ability to work on the List View that is specific to the navigation menu. So again, if I’m in an individual block, I don’t get that choice. But if I select the entire navigation using the circle, or in the List View to get the entire navigation, I now can go into a specific List View that is just for this navigation block. And it gives me some arrows to toggle things up down around and I could drag and drop them to if I would like. So our navigation is really on its way.

Navigation Block Alignment

We’ve got just a few more options to look at for this navigation block. If I were to open up the settings, on the right hand side, I have additional settings related to the entire navigation screen. So I could choose the justification here. In addition to where I’ve shown you previously, I can change the orientation in different ways.

I have the ability to always show a mobile toggle if I would like that brings it to a collapsed looking hamburger icon. I’ll say only show that one we’re on mobile.

Navigation Block Design Options

I could also have it open things on click or not, I can modify the colors if I would like to, oh, maybe we’ll take that back. And then I could change out the background color here, if for some reason I wanted to. By selecting that same circle, again, I can uncustomize it, I can set up some default color options, and overlay text and all sorts of fun things with the colors here.

Under typography, with the typography, I could change, for instance, some of the options that are showing here on the right hand side of the word typography, I see font family options, so I can select a different font family, I see line height options. I also have choices available for if I want things to be in capital letters all the time, or lowercase no matter what or sentence case.

Managing Navigation Menus

Finally, at the very bottom, I have this advanced option. And the advanced option is actually where we can name our navigation. So I might call this my main nav. I could delete it from here, I could give it an HTML anchor. So if you’re using anchors and IDs, you can use that available and I could also give it some CSS classes so that if I need to use custom CSS to select something, I have that choice available as well.

When you’re all done creating your navigation menu, hit save and take a look at the front of your site.