Home » WordPress Tutorials » Customization » How to Create a Drop-Down Menu in WordPress

How to Create a Drop-Down Menu in WordPress

Menus are an essential part of every WordPress website. They help visitors navigate through your content and easily browse different sections.

When building a new site, creating menus will be one of the main tasks you should deal with. This is why it is important to know more about them and know how and when to use the proper type of menu section.

In this article, you will read how to create drop-down menus – a handy design approach that will make your site more intuitive and helpful to your audience.

 

How to Create a Drop-Down Menu in WordPress

The process is very simple.

First, you should create a new menu, or edit an existing one. Then, you should organize it into a drop-down design.

To do so, first, via your WordPress admin panel go to Appearance->Menus:

WordPress Menu Page

 

This will lead you to the Menus page. From here you can manage all your website menus:

WordPress Menu Creation page

 

For this demonstration, we will turn an already existing menu into a drop-down version.

First, we selected which components we would want to include in our menu. Select these from the section on the left:

WordPress Menu Items

 

Once you’ve done so, have a look at all the menu components in the Menu Structure box. Notice how you can click and drag each section:

WordPress Drag and Drop Menu Component

 

First, align the components in the way you wish them to appear vertically. Then decide which component should be the main one and put it on top of all others. It will contain all the rest of the sections and display them on demand:

WordPress Menu Aligment

 

Now, click and drag all the boxes below the main one. Then, again by clicking and dragging move each section slightly to the right of the main one:

WordPress Drop Down Menu Structure

 

Then, from the Menu Settings section decide in which site section you wish to include the drop-down menu:

WordPress Menu Options Section

 

When you are ready with your preferred alignment, don’t forget to save the menu.

Now, enter your website and hover to see how the result has turned out to be.

WordPress Drop-Down Menu

 

Conclusion

Adding a drop-down menu to your pages can greatly enhance the UX and aesthetics across your pages. WordPress grants you with a simple creation process and numerous options for creativity and experiments across your site.

Related:

Was this article useful?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Newest Articles:

How to Format Text in WordPress

When you create a post in WordPress, typing down the words is only a part of the job. Once written, you should format the text – separate paragraphs, include subheadings where needed, bold words and phrases, underline others, and include numbering and bullet points at...

How to Fix Error 505 Version Not Supported in WordPress

Error 505 Version Not supported might appear in various situations when working on your WordPress website. This kind of error can be very confusing and can show when least expected. However, the good news is that there are various fixes you can apply right away to get...

How to Fix Error 504 Gateway Timeout in WordPress

Error 504 Gateway Timeout in WordPress can really be annoying for you and your website visitors. The good news is that as with any other 5xx status code errors such as HTTP Error 500, Error 501 Not Implemented, and Error 503 Service Unavailable, the Gateway Timeout...

How to Fix Error 502 Bad Gateway in WordPress

502 Bad Gateway is quite a common error message in WordPress and although it looks like something very serious and technically demanding to fix, there are some quick steps you can undertake to deal with the issue. Just like Error 500 and 501 Not Implemented, Bad...

How to fix Error 501 Not Implemented in WordPress

When working on your WordPress website, you will eventually stumble upon various error codes such as 404 Not Found, Service Unavailable, and Error 500. Your web browser displays such error messages when there’s some issue between the web server and an Internet...

Ready to Create Your Website?