Blocks, Design Your Site, Theme Blocks

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.

Table of Contents

Insert a Navigation Block

To add a menu to your site, go to Appearance → Editor and select your header (or desired location for your menu.) Click the + block inserter icon to open the block library and select the Navigation block:

The + block inserter is clicked, and the user is searching for "navigation". The navigation block is marked with an arrow in the results.
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:

The initial options when adding a navigation block, which are explained in detail below this image.
  1. Select Menu: You can choose to display a menu you have already created on your site. This option enables you to select a menu you previously created from Appearance → Menus in a Classic Theme.
  2. Create a new menu from Select Menu → Tools → Create new menu. The new menu you’ll create here will be separate from the menu that was created from Appearance → Menus.
Select a menu to display in the Navigation block.
  1. Start empty: This creates a blank menu for you to manually add each link you want to show in the navigation.

After choosing one of those three options, you can then add additional items to the menu as needed.

To add a new link to the navigation, click on the + Block Inserter Icon. This will allow you to:

  • Choose from any of your recently updated pages.
  • Search by name and select any page, post, category, or tag.
  • Manually type or paste to add any link (including an external one from a different site) to your menu.
How to manually add links to the Navigation block.
Press ENTER on your keyboard to quickly add a link to the Navigation block

↑ Table of Contents ↑

Add Blocks to Your Navigation

You can also add a few special blocks built to fit within the Navigation block. These include:

To add any of these blocks into your menu:

  1. Click on the + Block Inserter Icon.
  2. Scroll to the bottom of the module that pops up, then click on the block you’d like to add.
How to add a Site Logo, Social Icons, or Search block to your menu.

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

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

  • Change block style
  • Justify items to be aligned to the left, center, or right side
  • Change alignment to wide width or full width (if supported by the theme)
  • Select Menu: Change to another menu on your site (that you previously created at Appearance Menus.)
  • Open the list view to view all menu items and rearrange them.
  • More options.

📌

If you do not see the option to change the width of the block to wide or full-width and your theme supports these options, it is possible the block has been added to a Group block. You can learn more about the Group block here.

↑ 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. The icon looks like three horizontal lines with an arrow to the left of it.
  3. A + button will appear below the page you added a submenu to. Click this to add a new menu item underneath the current one.
  4. Search for the page you want to add, or type/paste a URL.
  5. Press Enter.
Creating submenus in the Navigation block

↑ Table of Contents ↑

Block Settings (Navigation Block)

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, click the ‘cog’ (⚙️)icon next to the Publish button.

The block settings can be found in the sidebar.

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
Layout
Layout settings in the navigation block

In the Layout settings, you can:

  • Justify the menu items to the left, center, right, or use even spacing between each item.
  • Change the orientation of your Navigation block between horizontal (links shown in a row) and vertical (links shown in a column).
  • Choose to allow the menu items to move onto multiple lines if there are too many menu items to fit all on one line.
Display

The Overlay Menu lets you choose whether or not to collapse the navigation options in a menu icon (sometimes called a “hamburger button”) which opens as an overlay when clicked. This feature can be turned off, set to display on mobile devices only, or to always display.

You also have the option to set the submenus to open on click, and to toggle whether or not to show icons used to indicate a submenu. The actual icons used are determined by your theme.

Color

You can use the Color settings to select or customize the color of the text and background of your navigation menu, as well as the color of the overlay text and background.

Typography

Adjust the appearance of the block’s text with the following settings.

If you don’t see the setting, click the three dots to the right of Typography (as shown on the right.) You can then choose the option you want to access:

  • Font size
  • Font family
  • Appearance
  • Line height
  • Decoration
  • Letter case
  • Letter spacing
Typography dropdown menu
Typography in the Block Settings sidebar, with the additional options expanded.

Font size allows you to adjust the size of the text. You can choose from preset sizes like small, medium, and large.

You can also set a specific value by clicking the slider icon directly above the default selections, marked with a 1 in the screenshot below. You can change the units by clicking where a number 2 is marked in the screenshot below. Choices are pixels, em or rem.

Typography font size settings

Font family gives you the option to change the font style used. Choose from a list of fonts in a drop-down menu.

Appearance allows you to change the text’s style between regular and italic, ranging from thin to extra bold.

Line Height sets the spacing above/below the text. If you select zero, be sure to check your site on mobile.

Decoration includes options for underline and strikethrough (if available.)

Letter case allows you to set the text to all caps, the first letter capitalized, or all lower case.

Letter spacing sets the space between each character of the text. You can change the units from the default (pixels) to percentage, em, rem, vw, and vh. Learn more about relative units here.

Advanced

You can define an HTML anchor 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.

↑ Table of Contents ↑

Each menu item in your navigation block is a Page Link block. If you click on an individual Page Link block in your navigation, you will see a different set of options in the settings in the right sidebar.

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.

Link rel controls the navigation link’s rel attribute, the relationship between the current document and the document targeted by the link. This would include attributes such as nofollow or noreferrer.

Not quite what you're looking for?

Get Help