---
title: "How to Open WordPress Menu Dropdown on Click?"
url: https://nexterwp.com/docs/open-wordpress-menu-dropdown-on-click/
date: 2024-12-02
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to open the WordPress menu dropdown on click? By default, the WordPress dropdown menu opens on hover however, this can be an issue for users on touchscreens..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Open-WordPress-Menu-Dropdown-on-Click_-1024x519.jpg
word_count: 197
---

# How to Open WordPress Menu Dropdown on Click?

## Key Takeaways

- Nexter Blocks includes a Navigation Menu block that allows users to open dropdown menus on click.
- The dropdown menu feature enhances usability for touchscreen and mobile device users.
- Users can customize dropdown effects using the Submenu Transition options in the Navigation Menu block.

Do you want to open the WordPress menu dropdown on click? By default, the WordPress dropdown menu opens on hover however, this can be an issue for users on touchscreens or mobile devices. So, opening the dropdown menu on click will ensure it works on all devices.

With the Navigation Menu block from the Nexter Blocks, you can easily open the dropdown menu on click on WordPress.

*To check the complete feature overview documentation of the Nexter Blocks Navigation Menu block, [click here](https://nexterwp.com/docs/add-a-navigation-menu-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-navigation-menu/)

To do this, add the Navigation Menu block to the header template and follow the steps -

> *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)*.* 

1. Select the appropriate options from the **Type** and **Menu Layout** sections.

2. Then select or create the menu, depending on the option selected in the **Type **section.

3. From the **Submenu Open** section, select **OnClick**.

![](https://nexterwp.com/wp-content/uploads/2024/12/navigation-menu-on-click.png)

You can select the appropriate effects for the dropdown menu from the **Submenu Transition** dropdown.

Now, your dropdown menu will open on click.

## Frequently Asked Questions

**Q: What should I do if the dropdown menu doesn't open on click?**
A: If the dropdown menu isn't opening on click, ensure that you have selected 'OnClick' in the Submenu Open section of the Navigation Menu block settings. This setting is crucial for enabling the click-to-open functionality. If it's still not working, double-check that the Nexter Blocks are properly installed and activated, as this block is part of that ecosystem.

**Q: Can I use the Navigation Menu block on mobile devices?**
A: The Navigation Menu block from Nexter Blocks is designed to enhance usability on mobile devices by allowing dropdowns to open on click. This is particularly beneficial for touchscreen users who may struggle with hover actions. By implementing this feature, you ensure a smoother navigation experience across all devices.

**Q: What are the best settings for creating a user-friendly dropdown menu?**
A: For a user-friendly dropdown menu, select 'OnClick' in the Submenu Open section to accommodate touchscreen users. Additionally, consider experimenting with different effects from the Submenu Transition dropdown to enhance visual appeal. These settings can significantly improve user interaction and accessibility.

**Q: How do I create a header template for my menu?**
A: To create a header template for your menu, you can use the free Nexter Builder. This tool allows you to customize your header layout easily. After creating the header, you can add the Navigation Menu block and configure it to open on click, ensuring a responsive design for your site.

**Q: Are there any limitations to using the Navigation Menu block?**
A: One limitation of the Navigation Menu block is that it requires the Nexter Blocks to be installed and activated. Additionally, it is specifically designed for use with Gutenberg, meaning it won't function as a standalone theme without this builder. Ensure you are using the correct setup to avoid compatibility issues.