Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
25 Million+
Websites using our plugins
Years of WordPress experience
WordPress tutorials
by experts

How to Add a Search Bar to WordPress Menu (Step by Step)

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add a search bar to your WordPress navigation menu?

By default, WordPress lets you add search to your website’s sidebar, footer, and other widget-ready areas. However, many users prefer to have the WordPress search box in the navigation menu because it’s easier for visitors to find.

In this article, we will show you how to easily add a search bar to your WordPress menu without having any coding knowledge.

Adding a Search Bar to WordPress Menu

Why Add a Search Bar to the WordPress Navigation Menu?

A search bar helps users find what they’re looking for without leaving your WordPress website. This can improve the user experience, keep visitors on your site for longer, and boost engagement.

That’s why most website designers and experts recommend adding a search bar to the navigation menu, where users can easily find it.

Add a search bar to WordPress menu

Depending on the theme you use, how you add a search bar to your menu will be different. If you use a classic theme, then you will need a WordPress search plugin.

As for block theme users, you can simply use the Full Site Editor (FSE).

With that in mind, let’s go through the two methods one by one. You can use the quick links below to skip to your desired section:

Method 1: Adding a Search Bar in a Classic WordPress Theme’s Menu

This first method is for those who use a classic WordPress theme. This means that you see the Appearance » Customize menu in your WordPress dashboard and can access the Theme Customizer.

If you use a classic theme, you can only add the WordPress search widget to widget-ready areas such as the sidebar, not the WordPress menu.

To work around this issue, you will need a plugin that lets you add a search bar to other areas of your site, including navigation menus.

SearchWP Modal Search Form is our best recommendation. This free plugin is easy to use, looks great with any theme, and won’t negatively impact your site’s performance. Also, it doesn’t require the premium SearchWP plugin.

Note: You may notice that the plugin hasn’t been tested with the latest WordPress version. But we have tested it ourselves, and it works fine for this purpose.

You can read our piece on whether you should install untested WordPress plugins if you have any questions.

The first thing you need to do is to install and activate the SearchWP Modal Search Form plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to add the search bar to your WordPress menu. Simply go to Appearance » Menus and then make sure you select the Primary menu in the ‘Select menu to edit’ dropdown.

Make Sure the Primary Menu Is Selected

After that, click on the ‘Select’ button.

Next, click on the SearchWP Modal Search Forms box towards the left of the screen.

The SearchWP native search template

You can see the plugin has automatically added a ‘Native WordPress’ search template. Go ahead and check the ‘Native WordPress’ box.

Then, click on the ‘Add to menu’ button.

Adding a search bar to the WordPress navigation menu

WordPress will now add a new ‘Native WordPress’ item to the menu.

To configure this item, give it a click. To start, it’s a good idea to change the navigation label to ‘Search’ so visitors know this is a search field.

To make this change, simply type ‘Search’ into the ‘Navigation Label’ field.

Adding a Search label to the WordPress navigation menu

After that, click on the ‘Save Menu’ button to save your changes. Now, if you visit your WordPress blog, you’ll see a new Search bar in the navigation menu.

SearchWP will automatically style the search to suit your WordPress theme, as you can see in the following images.

Search Preview

Method 2: Adding a Search Bar in a Block WordPress Theme’s Menu

If you use a block WordPress theme, then you can use the Full Site Editor to add a search bar to your navigation menu.

To do it, simply go to Appearance » Editor in the WordPress admin area.

Selecting the Full-Site Editor from the WordPress admin panel

You will now see a list of options to customize your theme.

Here, just click on ‘Navigation.’

Selecting Navigation in WordPress Full Site Editing

Next, click the pencil ‘Edit’ button.

This will direct you to the block editor.

Clicking the pencil edit button for Navigation in WordPress Full Site Editing

At this stage, you can click the ‘+ Add Block’ button anywhere on the screen.

After that, choose the Search block.

Adding the search block to the navigation menu in Full Site Editor

Your navigation menu should have a search bar in it now.

Additionally, you can edit the placeholder text and change it into something like ‘What are you searching for?’ On the block settings sidebar, feel free to customize how the search bar looks.

Adding a placeholder text in the search bar with Full Site Editor

Once you are happy with the search block, just click ‘Save.’

Besides adding a search bar to your navigation menu, there are many more ways to improve your WordPress search experience.

One is to use SearchWP. This plugin helps you customize your WordPress search algorithm without touching any code.

For example, you can make your search form even more user-friendly by adding live search results using Ajax technology. This will automatically show the visitor relevant search results as they type the query, just like Google.

For more information, you can read our article on how to add live Ajax search to your WordPress site.

Live Search Preview

Here are other tips and tricks to enhance WordPress search:

We hope this article helped you learn how to add a search bar to a WordPress menu. You may also want to see our expert pick of the best live chat software for small businesses or our list of useful tips to speed up WordPress and boost performance.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

31 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Angel Rodriguez says

    Thanks for this, this plugin worked great and saved me from having to replace or edit my theme again.

  3. Rawan says

    These plugins are untested for WP version 5.8.1

    Is it still ok to install them or is there other plugins that are tested for that version?

  4. jafrin says

    This video is very helpful for me.But I want bar menu is like amazon page .Please help me .How do create big search bar like in amazon page

  5. Erin says

    Is there a way to display the results that are generated by the plugin differently? I get a list of images and descriptions but they display images in all different sizes. I would like them to display in the same way as my product pages do with 24 results per page, and 4 columns.
    thank you

    • WPBeginner Support says

      For customizing the results page you would want to check with the plugin’s support and they should be able to assist.


    • WPBeginner Support says

      Our theme is custom created so we manually set that up with the creation of the theme :)


  6. Angelica says

    Really helpful! I find the default style is not visually pleasing, but the sliding option works a treat. Thanks for this.

  7. Rochelle says

    I would like the search item to appear as the first item in the menu, not the last. Is this possible?

    • WPBeginner Support says

      It would depend on your specific theme but if you reach out to the plugin’s support they will be able to help you change the placement :)


  8. Anupam Kumar says


    How to style the social icons like you did in your site for, with those gaps and lines , i dont know css,


    • WPBeginner Support says

      It appears the plugin has updated since this article was last updated, we will take a look into updating this post.


    • WPBeginner Support says

      Thank you for letting us know, it appears the plugin has been renamed since we created this article. We’ll look into updating this :)


  9. Raymond says

    Why is every solution on this website a plugin? Plugins bloat websites and slow them down; one would expect you to know that. There are better solutions than installing a plugin for everything!

    • Dan Conway says

      Not sure if it is due to an update but I noticed the same thing. But it seems the option can be found under ‘Ivory Search > Settings’ then you should be presented with the first settings which are ‘Menu search’ and the first expandable option to select a menu to add it to.

  10. Aditi Bisen says

    Can we choose whether the search appears only for mobile/tablet version and not for desktop?

  11. Ihsan says

    unfortunately, it doesn’t display correctly as it mess up with the nav menu. I’ve tried different plugins and all of those are the same. For newbie, seems like no other way but asking to the theme developer or professional help to code it manually.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.