Navigation Block

Using the Navigation Block in Full Site Editing (FSE) Themes like Spectra One

The Navigation block plays a key role in guiding visitors around your website by displaying menus with links to different pages, posts, and custom links.

In this guide, we’ll walk you through creating, modifying, and styling your menu using the Navigation block, particularly in Full Site Editing (FSE) themes like Spectra One.

Adding a Navigation Block

The Navigation block is commonly added to templates like headers or footers. Here’s how to add one to your site:

• Go to your site’s dashboard.
• Navigate to Appearance → Editor.
• Select the Template or Template Part (like the header or footer) where you want the navigation menu.
• Click the + Block Inserter icon.
• Use the search bar to look for “Navigation” and click it to add the block.

For a better understanding, you can watch this video:

Once added, if you don’t have an existing menu, the block will contain the Page List block by default, which lists all published pages. As you create new pages, they will automatically be added to this list.

Customizing Your Navigation Block

To have more control over the menu, follow these steps:

• Click on the Page List block within the Editor or navigate to it using the List View icon.
• Click the Edit button in the toolbar.
• Confirm the edit by clicking the Edit button again.

This converts the Page List block into individual Page Link blocks, allowing you to customize your menu by adding elements like buttons, custom links, categories, tags, submenus, and more.

Adding Navigation Menu Items

After customizing your Navigation block, you can begin adding different types of menu items, such as pages, posts, category pages, and buttons. Here’s how to do it:

• Visit your site’s dashboard and go to Appearance → Editor.
• Click the Navigation block.
• To add a new menu item, click the + (Plus) icon within the block.
• You can either:
  • Search for an existing page or post.
  • Add a custom link by entering the exact URL.
  • Use the Browse All option to add other block types like Site Logo, Social Icons, or Buttons.

Navigation Block Toolbar

When working with the Navigation block, a toolbar appears above it with various controls, including:

• Change block type: Convert the block into a different type.
• Drag: Move the block to a new position.
• Move: Shift the block’s position left or right.
• Justify: Align the menu left, right, center, or evenly space the links.
• More options: Access additional settings like duplication or removal.

Each individual link within the navigation also has its own toolbar for making adjustments such as adding submenus, changing the link, bolding text, italicizing, or inserting an inline image.

Here is the reference screenshot:

Navigation Block Settings

The Settings sidebar provides more control over your navigation block. If you don’t see it, click the Settings icon (a square with two uneven columns) in the top right corner of the editor.

The Navigation block settings include:

1. Menu List View

• Control the menu items.
• Add or remove links.
• Create submenus.
• Change the order by dragging items.
• Switch to a different menu or create a new one.

2. Block Settings

Access additional settings by clicking the gear icon:

a. Layout

• Justify the links (left, center, right, or evenly spaced).
• Set the orientation of the menu (horizontal or vertical).
• Control whether the navigation wraps into multiple lines or stays on a single line.

b. Display

• Customize the mobile view by toggling a hamburger icon (three horizontal lines).
• Choose between displaying the word “Menu” or an icon for mobile users.
• Configure the Overlay Menu, which collapses the navigation into a hamburger icon that opens into a full-screen menu.

c. Submenus

• Control whether submenus open on hover or on click.
• Show an arrow next to submenu items to indicate that more links are available.

d. Advanced

• Rename or delete the menu.
• Manage all your existing menus.
• Add a custom CSS class for more advanced styling.

Navigation Block Styles

The Styles tab allows you to customize the visual appearance of your navigation block. The icon looks like a circle with half of it filled in.

In the Styles tab, you can adjust:

• Colors: Change the link and background colors.
• Typography: Adjust the font size, weight, and letter spacing.
• Dimensions: Control the padding and margins of the menu.

Link Settings

Each link within the Navigation block has additional customization options available in the sidebar:

• Label: The text that appears for the menu item.
• URL: The destination link for the menu item.
• Description: Additional text, if your theme supports it.
• Title Attribute: A tooltip that appears when users hover over the link.
• Rel Attribute: Manage relationships for SEO, such as adding “nofollow” to links.

By understanding how to use and customize the Navigation block in an FSE theme like Spectra One, you can easily create dynamic and responsive menus to improve your site’s navigation and user experience.