A New Navigation Search

GeneratePress 3.3.0 (currently in alpha testing) has a new and improved Navigation Search feature.

While our old Navigation Search feature has served us well over the years, it was time for a new design with more modern accessibility features.

To use the new Navigation Search, you first need to deactivate the old one in the Customizer (Customize > Layout > Primary Navigation). This will reveal the new “Enable navigation search modal” option.

Our new Navigation Search adds the same icon to your navigation, but it opens as a fully-accessible modal, instead of opening on top of your menu items.

The new Navigation Search Modal

This new modal is completely accessible and can be triggered easily with a data attribute: data-gpmodal-trigger="gp-search"

You can also replace the search functionality inside the modal directly in GP Premium 2.3.0 using the new “Search Modal” Block Element. Simply create the new Element, add your own Search block (or custom HTML), and you’re good to go! You can even use a block plugin like GenerateBlocks to define the width and design of the modal.

We hope you enjoy the new feature! Let us know what you think in the comments 🙂

6 thoughts on “A New Navigation Search”

    • Hi there,

      The new search modal can be navigated using only your keyboard – no mouse needed. It also has all of the necessary labels for screen readers 🙂

  1. Hi, I don’t understand how to activate the new search field. I am using GP Premium. Can you give me some more guidance? Thank you

    • It can be activated in Customize > Layout > Primary Navigation.

      If you have the current Navigation Search option enabled, you need to disable it first so the new option appears.

  2. Ehi Tom, I recently tested this new functionality and it’s great!
    I was wondering if there’s a way to add a close button to the modal. Is there any particular class we can use to call a JS function?


Leave a Comment