Home » WordPress Tutorials » Basics » How to Use the Navigation Block in Gutenberg

How to Use the Navigation Block in Gutenberg

With the Gutenberg Navigation block, you can add various types of navigation on any page or within any blog post on your website.

Similar to the classic WordPress menu, the Navigation block can be modified in numerous ways and become a handy tool in many situations.

In the following paragraphs, you will read how to add a Navigation Block to your page content and how to modify it, so it best fits your needs.

 

How to Add a Navigation Block in WordPress

The first thing you need to do to use the Navigation block is to insert it in your page/post content area. There are various ways of inserting Gutenberg blocks in WordPress, and each one of them is as effective as the others.

The first thing you should do is to enter your WordPress admin panel.

Once inside the WordPress dashboard, make sure you select Gutenberg as your main editor.

Then, create a new page, a blog post, or simply edit some of your already existing posts and pages.

N.B! Keep in mind that the process of using Navigation blocks in WordPress is the same, regardless of whether you wish to insert it in a blog post or a static page.

For this demonstration, we created a new WordPress page and opened the Gutenberg editor:

WordPress Gutenberg Editor

 

Then we added a sample title tag and bulked up the content by inserting some Gutenberg blocks – two paragraph blocks and and we also added an image block:

WordPress Gutenberg Editor Add Content

 

After we have added some content to our page or a blog post, it is time to insert a navigation block. To do so, click on the blue + button located at the top left of the screen:

WordPress Gutenberg Editor

 

Clicking the button will make WordPress open the full library of Gutenberg blocks:

WordPress Gutenberg Editor Blocks Library

 

Once you open the Gutenberg block library, browse the list and find “Nav block”, or simply type in “Navigation block” in the search field on the top of the list of all available block options:

WordPress Gutenberg Search Block

 

Now, locate the  “Nav block” icon:

WordPress Gutenberg Editor Navigation Icon

 

Once you find it, click on the icon, so WordPress inserts the block in your content area. It looks like this:

WordPress Gutenberg Editor Nabigation

 

Now you have managed to insert the block in your content area. In the following paragraphs, you will read how to use it, so it best fits your site design and functionality requirements.

 

How to Set Up the Navigation Block

There are numerous ways you can set up the Navigation block – similar to the built-in WordPress menu, you can add links to your website pages, insert a brand logo, add a button, add a search function, or a link to your website’s blog section. Options are quite abundant.

In our example, we will add a sample logo, and links to Home, About Us, and Services web pages.

To add a logo, the first thing you should do is select the Nav block and then click on the black + button. Doing so grants you the opportunity to add a new item to your navigation block:

WordPress Gutenberg Editor Add Nav Block Items

 

Once you click the button, a new menu with various options will appear:

WordPress Gutenberg Editor Nab Block Options

 

From the suggested options, select Site Logo:

WordPress Gutenberg Editor Site Logo

 

Clicking on this button will make Gutenberg automatically insert your website logo within the Nav block area:

WordPress Gutenberg Editor Nav Block Logo

 

Now, once the logo is inserted, you can move it within the Navigation block area. To do so, click on the logo, so an options menu appears:

WordPress Gutenberg Editor Align Logo

 

Now, while the menu is active, notice the two arrow buttons. They are used to move the Navigation block elements to the left or to the right:

WordPress Gutenberg Editor Move Logo

 

For our example, we would want to move the logo to the far left of the Navigation block. To do so, we click the arrow pointing left until the item has moved to the position we want it to appear:

WordPress Gutenberg Editor Logo Alignment

 

Once the logo is right where we want it, we can add links to our website pages. The first will be a link pointing to our About page. The navigation block has already inserted several items, one of which is an About link. You can edit this one, or simply add a new item by clicking on the plus button.

For this demonstration, we will edit the default suggestion. To do so, we simply click on the item named About within the Navigation block, so a menu appears:

WordPress Gutenberg Editor Block Options

 

From this menu click on the Link icon:

WordPress Gutenberg Editor Add Link

 

Clicking this icon will open more options that you can customize:

WordPress Gutenberg Editor Link Text

 

To add a link you want and a name within which you will encapsulate it, simply click on the Edit icon:

WordPress Gutenberg Editor Edit Link

 

Once you click it, you can now insert a link to the page you wish this Navigation block item to lead to and its name:

WordPress Gutenberg Editor Navigation Block URL text

 

Add the text your URL will be contained in the TEXT area and the page URL within the URL area. Once you do, Gutenberg will save the settings.

Now we have managed to include a logo and a single URL in our Nav block.

Follow these steps for each item you wish to include in your Navigation block and once you are done editing it, click on the blue Update button, so WordPress saves your changes and preferred settings:

WordPress Gutenberg Editor Save Settings

 

Tips and tricks for using the Navigation Block

Although there are many ways you can use the Navigation block, there are some rules of thumb that can you can follow:

  • The Navigation block should contain just the right number of items, so it becomes useful for your website visitors, so don’t fill it with too much information.
  • This block is oftentimes used at the top or at the bottom of the web page. When placed at the top, it can be used as a quick guide to the content that follows right after it, or as a section that contains your most important site pages. When placed at the bottom of the page, the Nav block is used to showcase related pages, articles, and links to Social Media sites.
  • For optimal results, try out different alignment settings – see whether it fits your overall design layout when you align it to the left, or right or keep it in the center.

 

Conclusion

The Navigation block, or simply the Nav block allows you to create navigation for your website and include logos, page links, custom links, and Social Media links.

To see whether the Nav block will be suitable for your website needs and preferences it is highly advisable to experiment with different layouts and ideas, as working with this particular Gutenberg block is not necessarily a linear process – the possibilities are quite abundant.

Related:

Was this article useful?

Click on a star to rate it!

Average rating 1 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

Newest Articles:

How to Add a Site Logo Block in WordPress with Gutenberg

Adding a site logo in WordPress with Gutenberg is straightforward and requires only a few mouse clicks and just several minutes of your time. In the following paragraphs, you will read how to add a site logo to your WordPress website via the Gutenberg editor step by...

How to Add Images to WordPress with Gutenberg

Adding images with Gutenberg is quite simple. The block editor is very user-friendly and allows you to add images in several ways. In the following paragraphs, you will read about 4 methods you can instantly use to upload the media files you want.   How to Add...

How to Disable Gutenberg in WordPress

If Gutenberg is not suitable for your needs and wish to switch back to the Classic Editor, continue reading, as in this article we will show you 3 simple methods of how to disable the block editor. In the following sections, you will read how to disable Gutenberg by:...

5 Best Gutenberg Plugins for WordPress

One of the fastest and most convenient ways of enhancing the functionalities of Gutenberg is by using various WordPress plugins. Although Gutenberg is very versatile and feature-rich by itself, the open-source nature of WordPress has inspired developers all around the...

How to Add a Contact Form with WordPress Gutenberg Editor

If you are using Gutenberg to craft your WordPress website, then you should know that the process is very easy, especially by using the block editor. In the following paragraphs, you will read how to add one to your pages.   How to Add a Contact Form with...

Ready to Create Your Website?