Sign inGet GeneratePress One

Introducing the Navigation and Site Header Blocks

GenerateBlocks 2.2 brings two new blocks, the Site Header Block and the Navigation Block. This release allows site owners new capabilities to create navigation and headers beyond the Customizer. This tutorial video from The Admin Bar shows you how to use them.

May 27, 2025

We’re thrilled to announce the release of two powerful new additions to GenerateBlocks Pro: the Navigation Block and the Site Header Block. These innovative blocks, included in GenerateBlocks Pro 2.2, are designed to give you even more flexibility and control when building fast, lightweight, and professional WordPress websites using the block editor. 

Why These Blocks Are Important

As WordPress transitions to Full Site Editing (FSE), building responsive, accessible, intuitive, and fast-loading navigation and site headers is essential. No longer are headers and navigation relegated solely to the WordPress Customizer. Now, you can easily build headers and navigation with the same block-based methodology used to create any page. This not only simplifies the design process but also ensures compatibility with WordPress’s evolving ecosystem, giving you the freedom to craft modern, future-proof websites with ease.

Navigation Block

The Navigation Block empowers you to create dynamic and responsive navigation menus directly within the WordPress block editor. The block consists of a main Navigation Block and several child blocks. Each block provides extensive controls for styling and customization. With this block, you can:

  • Build custom navigation menus with full control over layout, typography, and colors.
  • Create full function drop-down navigation for sites with complex information architecture. 
  • Ensure responsiveness with specific settings for any viewport, from desktop, mobile, and tablet.
  • Choose from numerous lightweight animation effects, including multiple sliding and fading effects. 
  • Leverage GenerateBlocks lightweight codebase for optimal performance.

For a deep dive into its features and setup, check out the Navigation Block documentation.

Site Header Block

The Site Header Block takes header customization to the next level, allowing you to craft unique, block-based headers that replace the default GeneratePress site header. Key features include:

  • Complete design freedom using the block editor to add logos, menus, buttons, or dynamic content.
  • Support for merging headers with page content for stunning hero sections.
  • Precise control over editor width to visualize your design accurately.
  • Compatibility with GenerateBlocks for dynamic data and advanced layouts.

Learn more about its capabilities in the Site Header Block documentation.

How to Get Started

Site Header Block

The Site Header Block can be used as an individual block on each page, as a reusable block, or it can be used within GeneratePress Elements. For a smaller site with just a few pages, a reusable block might be just what you need. For larger sites, make use of Elements for powerful display capabilities. 

For a simple site, place the Site Header Block on the page. Choose if you’d like a Sticky Header in the settings, or leave the setting set to None.

For the Site Header Block, create a new Block Element in Appearance > Elements and create your site header as desired. Choose the display location in the Element settings. 

Navigation Block

The Navigation Block can be used both within the Site Header Block or independently, such as in a site footer. Upon placement, it will retrieve the published pages within your WordPress site. You have the option also to retrieve the classic WordPress menu system, allowing you to customize the look and feel within the block editor. 

Use the block editor to design your navigation or header, referring to the documentation for guidance.

If you’re using another block-based theme, you can still use the Navigation and Site Header blocks by using a Template Part block.

Test your setup and share your feedback with us, or in the Facebook community. 

What’s Next?

Stay tuned for updates, and watch this space for tutorials to get the most out of these innovations.

We can’t wait to see the incredible headers and navigation menus you create with these new blocks! Dive in, explore, and let us know how we can make them even better.

18 responses

  1. Oliver

    Great work.

    1. It needs a proper search module
    2. Visibility controls for login user, etc., on pages and posts
    3. Visibility controls for login user, etc. in the Menu

  2. Caddy Marketing

    How do the new Navigation and Site Header Blocks compare in terms of performance and accessibility to existing solutions, such as the classic GeneratePress navigation built via the Customizer or standard block-based menus?

    1. Tom

      We put a lot of work into its accessibility and performance. Being able to start fresh was a huge advantage over trying to improve the 10+ year old GeneratePress navigation. I can confidently say our block is better for both accessibility and performance when compared to the standard GeneratePress navigation (and way more flexible). Hard to speak on the standard block-based menus as I haven’t looked into them in depth, but I’d be surprised if they were better.

      1. Naman

        How to add search button in header

        1. Kathy

          You can easily add the WordPress Search Block to your Site Header Block.

  3. Andreas

    This is such a cool feature, tbh it was missing for such a great plugin.

    This path looks like GP will have a block theme, I imagine the PRO version of the block theme to go hand in hand with GenerateOne.

    More modern design patterns and ready websites with a Block Theme.

  4. Daniel

    For sites already using a Block Element of type Site Header, are there any benefits to the new Site Header block? Or is it the same thing but just usable outside of an element?

    1. Tom

      The Site Header Block Element allows you to replace the standard theme header area with something you create in the block editor.

      The new Site Header block simply allows you to create that replacement in the block editor with the Site Header block so you can do things like make it sticky.

      Think of the Block Element as the template part, and the Site Header block as the thing you use to actually build that part of the template.

  5. Alex

    Really excited to see this direction – it’s a great step toward full block-based control without compromising on performance or accessibility.

  6. Ron Crow

    This is something I am really looking forward to? What is the ETA for public release?

    1. Tom

      We’re aiming for this week! 🙂

  7. Keith Mason

    2.2 is a fantastic addition (so thank you), but straight away I am unable to use the new blocks – as the sites I build require mega menus (full width dropdowns with multiple columns of content in each) and the new blocks do not offer this. So sadly, I need to stick to a different page builder for the headers still.
    Do you have a rough idea when the ability to build mega menus will be added please?

    Thanks in advance

    1. Kathy

      It’s on the roadmap, but we don’t have an exact timeframe. Addison Hall does have a video on how to do this with the current GeneratePress & GenerateBlocks, though, and that might be helpful. https://youtu.be/FhQyXxVouFo

  8. Rio

    Awesome feature!

    The upcoming section might focus on the popup builder and carousel features. 😁

  9. Noman Durrani

    What about dropdown I want something like Kadance Drop-down builder

    1. Kathy

      You can create drop downs for site headers using Overlay Panels, which expands functionality to full mega menus. https://generatepress.com/introducing-mega-menus-in-generateblocks-pro/

  10. Russell

    Is there a toggle to easily merge the newly created header with the page content (for the purpose of transparent header)? I couldn’t find it.

    1. Kathy

      Set the display to absolute. Absolute merges the header and content immediately. The site header also requires these settings: inset > top/left/right to 0 .

Leave a comment

Your email won’t be published. Fields marked * are required.