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 Add a Site Logo Block in WordPress with Gutenberg

Adding a site logo in WordPress with Gutenberg is straightforward and requires only a few mouse clicks and just several minutes of your time. In the following paragraphs, you will read how to add a site logo to your WordPress website via the Gutenberg editor step by...

How to Add Images to WordPress with Gutenberg

Adding images with Gutenberg is quite simple. The block editor is very user-friendly and allows you to add images in several ways. In the following paragraphs, you will read about 4 methods you can instantly use to upload the media files you want.   How to Add...

How to Disable Gutenberg in WordPress

If Gutenberg is not suitable for your needs and wish to switch back to the Classic Editor, continue reading, as in this article we will show you 3 simple methods of how to disable the block editor. In the following sections, you will read how to disable Gutenberg by:...

5 Best Gutenberg Plugins for WordPress

One of the fastest and most convenient ways of enhancing the functionalities of Gutenberg is by using various WordPress plugins. Although Gutenberg is very versatile and feature-rich by itself, the open-source nature of WordPress has inspired developers all around the...

How to Add a Contact Form with WordPress Gutenberg Editor

If you are using Gutenberg to craft your WordPress website, then you should know that the process is very easy, especially by using the block editor. In the following paragraphs, you will read how to add one to your pages.   How to Add a Contact Form with...

Ready to Create Your Website?