Site Editor

Theme Blocks » Navigation Block

The Navigation block allows you to place a menu of links onto any page so that your visitors can 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

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

You can choose from either a horizontal or vertical orientation.

Adding the Navigation block
Adding the 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 three ways:

  1. Create from an existing menu: You can choose to display a menu you have already created on your site.
  2. Create empty: This creates a blank menu for you to manually add each link you want to show in the navigation.
  3. 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.

To add a new link to the navigation, click on the + icon which will allow you to choose from:

  • Page Link: a page on your site.
  • Post Link: a post on your site.
  • Category Link: all posts with a specific category.
  • Tag Link: all posts with a specific tag.
  • Link: an external URL.
  • Social Icons: icons for social networks.
  • Search: a search box for visitors to search your content.
Blocks you can add to the Navigation Block

↑ Table of Contents ↑

Block Toolbar (Navigation Block)

To reveal the block toolbar, you can click on the Navigation block and the toolbar will display.

Navigation block - main toolbar
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 individual links

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

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

Typography Settings

The Typography settings allow you to change the navigation items’ font size, either with relative percentages or down to the pixel. You can also set the Appearance of your lettering, whether you want it thin, bold, regular, light or another option.

The Line height setting under Typography settings allows one to set spacing above and below menu items. Further Typography settings options include choosing decorations (such as underlines and cross-outs) and letter casing (choosing if your navigation items are listed in all caps, all lowercase or a combination of both).

Typography Settings include Font size, Appearance, Line height, Decoration and Letter case.

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

Display Settings

If you don’t want a cluttered menu look on a smaller screen, you can also enable the responsive menu option. This lets the menu change its appearance according to screen size.

You also have the option to set the submenus to open on click, and to show or hide the icon used to indicate a submenu. The actual icon used is determined by your theme.


Some themes can show a small piece of text with your menu items. You can write that text in the Description box.

You can set a link 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.


↑ Table of Contents ↑

Advanced

The HTML Anchor is a useful tool for creating page jumps.

The Additional CSS class(es) option 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