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 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.



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.


Was this article useful?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

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

Newest Articles:

10 Best WordPress Themes for Gutenberg

If you craft your WordPress website by using Gutenberg, then it is likely that you have thought about working with a block editor-compatible theme. If that is the case, then you should know that there are numerous WordPress themes that are meant to be a perfect fit...

How to Copy a Page with WordPress Gutenberg Editor

Looking for ways to copy your WordPress web pages? The Gutenberg block editor got you covered. In this article, you will read about 3 different methods you can instantly apply when crafting your WordPress website.   How to Copy a Page with WordPress Gutenberg...

How to Add Tabs to Your WordPress Site with Gutenberg

Tabs are quite useful in numerous situations and can be a fresh addition to your WordPress websites. Massively used to showcase content categories, news, and various other types of posts in a very structured manner, tabs contribute to making your site content more...

How to Create Tables in WordPress Using Gutenberg Editor

Creating a table in WordPress with the Gutenberg Block Editor is a straightforward task. Should you need to add one or several tables to your pages, the following paragraphs explain how to do so.   How to Create Tables in WordPress using Gutenberg Editor  ...

5 Best WordPress Slider Plugins for Gutenberg

When crafting your WordPress website, it is not only important to publish informative and well-structured content, but it is also crucial to make your web pages as aesthetically appealing as possible. An effective way of making your site more beautiful is by inserting...

Ready to Create Your Website?