- Section
- Troubleshooting – Icons missing from the blocks
- Spectra Patterns
- How to Set Multiple Column Fields in Contact Form 7 Styler of Spectra?
- Styling Checkbox / Radio / Acceptance control in Contact Form 7 Designer block of Spectra
- Unable to Style Checkbox / Radio Buttons / Acceptance Control using Contact Form 7 Styler of Spectra
- Tab Index – for multiple Gravity Forms
- Getting Started With Spectra
- How to Exclude A Heading from Table of Contents?
- Spectra – Display Conditions for Blocks
- Installing and Importing Starter Templates
- Getting Started With Spectra
- Manually Install Spectra via FTP
- Automatic Beta Updates for Spectra
- Rollback To Previous Versions
- How to Load Google Fonts Locally
- Activate the Spectra Pro License Key
- How to Install Spectra Pro Plugin
- Translate Spectra Strings using Loco Translate
- How to Process Refund Requests?
- How to add a Transparent / Sticky header?
- How to Change the Site Logo?
- How to Change Global Styles?
- How to Disable Title on Posts, Pages?
- How to add a transparent/ sticky header for a single page/post?
- Change Header and Footer Patterns in Spectra One Theme
- Add Custom/Google Fonts In Spectra One
- How To Reset Global Default Styling?
- Manually Install Spectra One via FTP?
- Disable or Enable Header/Footer for Specific Pages/Posts
- How can I Change the Contents of the Sidebar?
- Templates and Template Parts in FSE
- How to create Custom Front Page in WordPress
- Frequently Asked Questions
- How to Hide and Show Block Elements?
- How to use Group Blocks or create Containers in Spectra One
- How to clear customizations in Spectra One theme
- What are the Actual Sizes of the Predefined Font Sizes?
- How to make changes to single pages like 404, Archive, Single
- How to change the post/page hero section?
- How to Install Spectra One Theme?
- How to Global Change the Width Using Layouts
- How to Use Sidebar for Page and Post
- What is a Stylebook in FSE?
- How to Change the Global Color Palette?
- Customizing Block Styles in Spectra One Theme
- Understanding Patterns and How to Modify Them in Spectra One Theme
- Changing Sidebar Position for Pages and Posts
- Understanding Duotone and Adding Dynamic Color to SVG
- Exploring Full Site Editing: Creating Websites Made Easy!
- Exploring the “Edit Template” Feature in the Admin Bar
- How to Change the Favicon in Spectra One
- Sticky Header in WooCommerce Based Template
- Integrating Google Analytics into Spectra One Theme
- How to Create a Child Theme for Spectra One
- How to Use WPML for Translating Spectra One Websites
- Accessing the Additional CSS Section in an FSE Theme
- Creating and Managing Templates for Custom Post Types in Spectra One
- Create a Custom Post Type Archive Template Using ACF Spectra One Theme
- Navigation Block
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.
We don't respond to the article feedback, we use it to improve our support content.