# Dropdown Menu for Wordpress Theme

**URL:** <https://forum.pinegrow.com/t/dropdown-menu-for-wordpress-theme/6601>\
**Category:** WordPress\
**Created:** [June 12, 2022, 9:36pm UTC](https://forum.pinegrow.com/t/dropdown-menu-for-wordpress-theme/6601 "2022-06-12T21:36:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![aliveli](https://avatars.discourse-cdn.com/v4/letter/a/eada6e/32.png) [@aliveli](https://forum.pinegrow.com/u/aliveli)\
**Post date:** [June 12, 2022, 9:36pm UTC](https://forum.pinegrow.com/t/dropdown-menu-for-wordpress-theme/6601/1 "2022-06-12T21:36:01Z")

</div>

Hi friends. I cant find a way to build a dropdown-menu on wordpress.  
Here I added a blank bootstrap 5 template.  
I looked up on Google but cant find a way.  
Cant anyone help me?  
How can we add a drop-down menu on wordpress?

[here is my template](https://www9.zippyshare.com/v/pkASfJm0/file.html)

 ![13](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/a5ae9a4f4d225d93fea7ad37b957d8f4495f0578.png)  
 ![11](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/d3d238ad9468ded3029ccf3bfa1022cfe156dd18.jpeg)  
 ![12](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/c/cd4d899e0e6e7e51189e4dd52d05bc1a761664de.jpeg)

---

<div class="post-metadata">

**Author:** ![MrAkhil2999](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mrakhil2999/32/4569_2.png) [@MrAkhil2999](https://forum.pinegrow.com/u/MrAkhil2999)\
**Post date:** [June 30, 2022, 12:46pm UTC](https://forum.pinegrow.com/t/dropdown-menu-for-wordpress-theme/6601/2 "2022-06-30T12:46:47Z")

</div>

Hi aliveli, You can use any dropdown plugins on WordPress that will help you to do your work easily. Here I have found a [website mega menu](https://wpcred.com/how-to-create-mega-menu-in-flatsome-woocommerce-theme) article where you can know how to create a menu that may help you well. Thanks, me later if you find it helpful.

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [July 13, 2022, 1:32pm UTC](https://forum.pinegrow.com/t/dropdown-menu-for-wordpress-theme/6601/3 "2022-07-13T13:32:33Z")

</div>

Hey @aliveli! WordPress menus are the bane of my existence, and there is a good reason why so many themes and plugins focus heavily on the styling and behavior of menus – it’s a pain to do it yourself! While Pinegrow makes single-level menus relatively simple, it doesn’t give us any helpers for dropdowns.

If you don’t want to use a WordPress menu plugin you’ll have to code the menu and its behavior yourself. The biggest thing to remember is that WordPress returns the Nav menu as an unstyled unordered list, so you’ll need to take care of the styling and dropdown behavior yourself. Look into the WordPress function reference for wp\_nav\_menu for more information (this forum only lets me post two links in a reply, otherwise I’d link to it myself).

If you are using bootstrap, it already comes with the code needed to create the dropdowns and Pinegrow does most of the work for you. While there are some ways to create dropdown menus with pure CSS, they aren’t very accessible. Most people use a little javascript to handle the hover dropdown actions.

I personally like alpine.js because it’s lightweight, flexible, and easy to use. Here is a great tutorial on [how to use Alpine.js to create an accessible menu](https://caffeinecreations.ca/blog/accessible-dropdown-navigation-with-tailwind-css-and-alpine-js/). The tutorial also uses Craft CMS and Tailwind in the example, but you can easily translate that to WordPress and whatever framework you are using.

If you want a Pinegrow native solution, you may be able to create the actions for your nav menu using the Pinegrow Interactions module since it uses Greensock. I haven’t tried this personally or done much research on the topic, but I [found a video](https://www.youtube.com/watch?v=c8NByyn7IWo) that might give you what you need.

I hope this helps.

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [December 19, 2022, 1:16pm UTC](https://forum.pinegrow.com/t/dropdown-menu-for-wordpress-theme/6601/4 "2022-12-19T13:16:24Z")

</div>

Follow-up: As of Pinegrow 7 and the Pinegrow WordPress plugin, drop-down menus are now natively supported.

---

<div class="post-metadata">

**Author:** ![texxsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/texxsmith/32/1201_2.png) [@texxsmith](https://forum.pinegrow.com/u/texxsmith)\
**Post date:** [December 19, 2022, 4:35pm UTC](https://forum.pinegrow.com/t/dropdown-menu-for-wordpress-theme/6601/5 "2022-12-19T16:35:10Z")

</div>

Not a lot of tutorials out there about WordPress Menus in Pinegrow. I’m currently trying to study up on this subject myself. I found this older one. Does anyone know of any newer ones? Maybe this will help others:

[![](https://img.youtube.com/vi/rW26ksh6ePg/maxresdefault.jpg "Navigation & Footer - Part 8 - Creating WordPress Themes without PHP Coding") ](https://www.youtube.com/watch?v=rW26ksh6ePg)

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [December 19, 2022, 11:59pm UTC](https://forum.pinegrow.com/t/dropdown-menu-for-wordpress-theme/6601/6 "2022-12-19T23:59:41Z")

</div>

I’m pretty sure I made this with the WP plug-in beta, but that feature has since been included in Pinegrow 7.

Creating and Styling WordPress Menus in Pinegrow: An Overview

[![](https://img.youtube.com/vi/hadUeF6aNQo/maxresdefault.jpg "Creating and Styling WordPress Menus in Pinegrow: An Overview") ](https://www.youtube.com/watch?v=hadUeF6aNQo)

And this one starting at 2:57

[![](https://img.youtube.com/vi/ZYzZe966lTg/maxresdefault.jpg "Pinegrow Countdown: Day 6 – What’s New") ](https://www.youtube.com/watch?v=ZYzZe966lTg)
