Blocks

Blocks »Navigation Block

The navigation block allows you to place a menu of links onto any page. This allows your visitors to easily navigate to other parts of your site.

The navigation block is an alternative to the more commonly used WordPress menu options. You’ll want to use those menu options in most cases.

Table of Contents

Inserting a Navigation Block

In order to add a navigation block, click on the block inserter icon to open the block library and select the navigation block:

Inserting a navigation block

For more, visit our detailed instructions on adding blocks.


↑ Table of Contents ↑

After inserting a navigation block, you can add links to it in one of two ways:

  1. Create from all top-level pages: This will automatically add every existing page of your site as a link, which you can later edit and rearrange. Only top-level pages (i.e. parent pages) are added here.
  2. Create empty: This creates a blank menu for you to manually add each link you want to show in the navigation.

To add a new link to the navigation, you can search existing pages or type/paste the URL of the page you wish to link to. You can link to external URLs too — it doesn’t have to be a page on your site!

Adding links to your navigation

↑ Table of Contents ↑

Block Toolbar (Navigation Block)

To reveal the block toolbar, you can click on the navigation block and the toolbar will display. Each block has its own block-specific controls that allow you to manipulate the block.

Navigation block toolbar

The icons on the navigation block toolbar, starting from the left, are:

  • Change block style
  • Change alignment to wide width or full width (if supported by the theme)
  • Justify items to be aligned to the left, center, or right side
  • Open the block navigator to allow you to select and edit individidual links
  • Change the text and background colors

↑ Table of Contents ↑

If you click on an individual item in your navigation, you will see a different set of options in the toolbar.

Navigation items toolbar

The icons on the navigation items toolbar, starting from the left, are:

  • Move items left or right
  • Edit link
  • Add a submenu
  • Bold, italics, and other text formatting options

↑ Table of Contents ↑

Creating Submenus

You can create submenus, also called dropdown menus, by following these steps:

  1. Click on the item under which you want your submenu items to appear.
  2. Click on the Add Submenu option in the toolbar that pops up.
  3. Search for the page you want to add, or type/paste a URL.
  4. Press Enter.
Creating submenus in the navigation block

↑ Table of Contents ↑

Block Settings

Every block has specific options in the sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ (⚙️)icon next to the Publish button.

The navigation block is unique in that it has two different sets of options in the sidebar, depending on what you have clicked on:

  • Settings for the navigation block overall
  • Settings for the individual links in your navigation
The block settings can be found in the sidebar.

↑ Table of Contents ↑

The Navigation Structure allows you to easily select which link you wish to edit. You can also add new links here by clicking on the ⨁ icon.

To access the Navigation Structure in the sidebar, click on your navigation block once (do not click on an individual link in the block.)


↑ Table of Contents ↑

Text & Color Settings

You can use the text settings to edit the size of the text in your navigation. You can use the color settings to change the color of the text and the color of the background.

Text settings
Color settings

↑ Table of Contents ↑

Some themes can show a small piece of text with your menu items. You can write that text here.


↑ Table of Contents ↑

SEO Settings

You can set a title attribute for each of your links. This defines extra information about your link for search engines. The title attribute is created by default so you don’t need to write it manually.

By enabling nofollow on your link, you are telling search engines to ignore this link.


↑ Table of Contents ↑

Advanced

The HTML Anchor is a useful tool for creating page jumps. If you toggle the block to its HTML view, you’ll see that the HTML Anchor input is added as a CSS ID to the heading tag. You can also see the CSS class in the block HTML.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block. Learn more.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

Not quite what you're looking for?

Get Help