Skip to main content

Navigation

In a WordPress block theme, adding and editing navigation is straightforward. You can create and manage navigation menus directly in the editor. To add a navigation menu in a block theme, go to the WordPress Dashboard, then navigate to Appearance → Editor. Within the editor, click the + icon to open the inserter and look for the Navigation Block. Once added, you can insert links to pages, posts, categories, or even custom links by clicking Add Link. You can also organize the links by dragging and dropping them into the preferred order or nesting them for dropdown menus

info

For step-by-step guidance on setting up a menu with the Navigation Block, watch this helpful video tutorial

Theme Header Navigation

This theme has included part header which includes a Navigation Block. This setup means you can customize the menu directly within the header area by adding links to pages, posts, categories, or custom links as needed.

To set up and customize the navigation menu in this theme's header, follow these steps.

  1. Go to Appearance → Editor in your WordPress dashboard.
  2. Go to Pattern → Header then Select the Header template part to access the header section of this theme. navigation step 2
  3. Click on the Navigation Block within the header.
  4. Add your own links, reorder them, or adjust settings as needed. navigation step 4
  5. Review and save changes to ensure your navigation menu aligns with your website's structure and style.

Offcanvas Header Navigation

This theme also includes an Offcanvas Header, designed to provide a modern and mobile-friendly navigation experience. Just like the standard header navigation, it uses the Navigation Block, allowing you to fully customize the menu items.

To set up and customize the navigation in the offcanvas header, follow this step

  1. Click the hamburger menu icon on the top header to open the offcanvas menu. offcanvas header navigation
  2. Select a Navigation Menu
    • Click on the Navigation block from the left sidebar.
    • In the right sidebar, click the three-dot next to the Menu.
    • Choose your desired navigation menu from the list. offcanvas header navigation
  3. Once your navigation is added to the offcanvas header, you can edit the menu items, change the layout, or adjust design settings using the block options. offcanvas header navigation
info

The offcanvas menu is usually triggered by a menu icon (hamburger icon) on smaller screens

Make sure your navigation structure in both the regular header and the offcanvas menu stays consistent for a seamless user experience.