WordPress 3 brought many great features. One of those great features was navigation menu support. Although many themes not supporting this great feature yet, you can use it with dropdown menu widget to create custom menus on your site. In this tutorial i will explain you how to use custom navigation menus with dropdown menu widget.
First make sure you have latest wordpress installation. Custom Navigation Menu support comes with WordPress 3. So if your wordpress version is lower than that, you need to update first. Don’t worry, it will worth it 
If you have the latest wordpress installation now, you will see Menus link under Appearance section of the admin panel.
Click on Menus to start building our brand new custom menu. WordPress may warn you about “theme doesn’t support custom menus” but don’t worry. We will be using menu in our dropdown widget so it doesn’t matter.
You see white box there under + sign. Enter a name for our new menu. For example, let’s call it, “My Custom Dropdown”. How original! Click on create menu button afterwards to create the menu.
Your menu is created now but it doesn’t have any link inside. You will see tools on the left to add links to your custom menu. You can add blog pages & categories to your menu.
You can also add custom links to your menu. After you add links, you can easily order your menu items using drag and drop.
You can create sub menus dragging a link item under another.
After your ordering is complete, save your menu. This menu is now added to dropdown menu widget. Steps from now on requires dropdown menu widget installed on your site. If you haven’t already click here to get it.
Add a dropdown menu widget to your widget area. Note that not all the themes have header widget areas. I like my custom themes to have it. Makes wordpress more customizable.
Select your custom menu from the Menu selection of dropdown menu widget. And click on Save.
If you just installed the dropdown menu widget you may need to visit menu style page. Change dropdown menu theme to any theme you like and then click on Save Changes.
Now visit your blog and enjoy your new custom menu. Cheers!
5 Comments
Hi,
How do I get the header widget areas, I need it to get this working on my theme. Please guide me asap.
thanks
This may be a dumb question, but will this work as a sidebar widget?
Yes Jean, it works both vertical & horizontal. You can add it anywhere you like. Vertical dropdown needs a default width to be defined however. Needs some css fixes sometimes.
Hi Shailan,
I like your Dropdown Menu Plug-in very much but I have a little trouble hovering the submenus. Sometimes it works, sometimes it doesn’t. Appreciate your advice.
Cheers,
Ang
Hello Ang, the problem is a css collision. Your sidebar widget styles make list items have margins. Here add this code to your stylesheet and it will be gone:
li.widget ul.dropdown ul{margin:0}li.widget ul.dropdown li{margin:0}
let me know if it doesn’t.
thanks for your comment.
One Trackback