ZeGuten — a collection of blocks for Gutenberg Get for $15.00

How to create a navigation menu in WordPress


SEO copywriter at Gutenix Team

Building a Call to action WordPress block in Gutenberg
Prew post
  • Mar 17, 2020
  • 3 min read
  • 170

How to create a navigation menu in WordPress

From our today’s tutorial, you will figure out what is a navigation menu WordPress block on your landing page. You will also learn how to create it and apply it to your one-page website. While the typical website uses a menu as a navigation tool to move from one page to another, the navigation menu of WordPress landing page will sail you to the needed section.

Each menu item is a so-called anchor. The landing page may be quite long and people won’t spend their time scrolling to a certain block. Jump links are used in listings or tables to navigate users to the part of the page they are looking for.

Adding a navigation menu WordPress block

In case you are still trying to puzzle out where to start building an anchor menu, this topic is for you. Everything starts in the Gutenberg editor area, as usual.

Go to your landing page and find a section, where you want to place an anchor. Remember, that in Gutenberg you can’t give a web address to any Image block. That is why we will give the link to the Heading blocks.

Open the Advanced tab and enter a word or two in the HTML Anchor field. Do it with each section on your landing page you want to link.

As a next step, you need to move to the admin dashboard > “Appearance” > “Menus”. Whether you already have a menu or not, you should create a new one. Give your menu a name in the “Menu Name” field and click the “Create Menu” button.

After that, take a look at the Menu Structure area. Here you can change the menu name and here your items will showcase.

In the Menu Settings area, choose where to display menu location on your landing page. In fact, you can place it wherever you want, even in the footer.

Use the Custom Links tab to add the anchor links with the titles to your menu.

In the URL field, you need to write the anchors, you gave to your sections, beginning with “#” with no spaces. In the Link Text field, you are able to give your link any name you want to display as a menu item. Don’t forget to save the menu after adding all anchors.

We will create a navigation menu with a few landing page sections:

link text

Now, let’s go to the draft of your landing website. Add a Navigation block at the top of your page and click on the “Create empty” text.

Type each of your HTML anchors, that you’ve given to the sections before. You can enable them to open in the new tab, add nofollow to link and write down the description.

add menu items

After you’ve added all HTML anchors to your navigation menu, you are able to style it up. Choose one of the layouts, replace the items and set the text size.

Take a look at the result of your work! We hope you enjoyed these simple steps of adding a navigation menu WordPress block on your landing page.

Check the other tutorials to create a vivid and multipurpose landing page website.

WordPress speed optimization tips
Next post
Building a Call to action WordPress block in Gutenberg
Prew post
WordPress speed optimization tips
Next post
Meet Gutenix, the devoted team of developers that stands behind ZeGuten plugin and Gutenix free theme. We're inspired by WordPress, and are always looking for a on opportunity to make work with it easier for everyone.
Give us a Call: +1.347.342.0463
Email: [email protected]
Subscribe to get the news from Gutenix! Be the first to know of updates & discounts!
Enter a valid email!
Server error. Please, try again later!
Form was successfuly submited!
Follow Us:
Copyright © 2020 Gutenix. All Rights Reserved.