How to Create a Custom Navigation Menu with Dropdown Sub-Menus in WordPress

A well-structured navigation menu is the cornerstone of a user-friendly website. It guides your visitors through your content, helping them find exactly what they’re looking for, whether it’s your latest blog post, services page, or contact information. While WordPress automatically generates a basic menu from your pages, mastering custom menus, especially with dropdown sub-menus, allows you to create a professional, intuitive, and highly organized user experience.

This detailed tutorial will walk you through every step of creating and managing custom navigation menus in WordPress, focusing on how to implement effective dropdown sub-menus to categorize your content neatly. By the end, you’ll be able to design a navigation system that enhances your site’s usability and aesthetic appeal.

Understanding WordPress Menus

Before we dive into the steps, it’s helpful to understand what a custom menu offers. Unlike a default menu that simply lists all your published pages, a custom menu gives you complete control. You can:

• Choose specific items: Include pages, posts, categories, tags, custom links (to external sites or specific sections of your own), and even specific post types.
• Order items freely: Arrange them in any sequence you desire.
• Create sub-menus: Organize related content under a parent item, creating intuitive dropdowns.
• Assign locations: Place different menus in various areas of your theme (e.g., primary header, footer, sidebar).

Let’s begin crafting your ideal navigation!

Step 1: Accessing the Menu Screen

Your journey to a custom menu begins in your WordPress administrative dashboard.

1. Log in to your WordPress dashboard. You’ll typically do this by navigating to ZEALTERCODE0.
2. In the left-hand navigation sidebar, hover over “Appearance”.
3. Click on “Menus”.

This will take you to the main “Menus” administration screen, which is where all the magic happens. If you’ve never created a menu before, this screen might look a bit sparse, prompting you to create your first one. If menus already exist, you’ll see them listed and selected in a dropdown.

Tip: The “Menus” screen is divided into two main sections: “Edit Menus” and “Manage Locations.” We’ll be working primarily in “Edit Menus” to build our menu, and then “Manage Locations” to assign it.

Step 2: Creating a New Menu

Even if your site has existing menus, it’s often best to start with a fresh one for your primary navigation to ensure full control.

1. At the top of the “Edit Menus” tab, look for the link that says “create a new menu”. Click it.
2. You’ll be prompted to “Menu Name”. Give your menu a descriptive name. For example, if this will be your main site navigation, you might call it “Main Navigation,” “Primary Menu,” or “Header Menu.” A clear name helps you identify it later, especially if you plan to create multiple menus for different locations (e.g., a footer menu, a social links menu).
3. Click the “Create Menu” button.

You’ve now created an empty canvas for your menu! The screen will refresh, and your newly named menu will be selected.

Example Menu Name: “Main Navigation”

Step 3: Adding Top-Level Menu Items

Now that you have a menu structure, it’s time to populate it with links. On the left side of the “Menus” screen, you’ll see several boxes under the “Add menu items” section. These allow you to add different types of content to your menu.

3.1 Adding Pages

This is the most common way to add items to your menu.

1. Expand the “Pages” box. You’ll see a list of your most recently published pages.
2. If you don’t see the page you want, click the “View All” tab to see a complete list, or use the “Search” tab to find a specific page.
3. Check the box next to each page you want to add to your menu (e.g., “Home,” “About Us,” “Services,” “Blog,” “Contact”).
4. Click the “Add to Menu” button.

The selected pages will now appear in the “Menu Structure” box on the right.

3.2 Adding Custom Links

Custom links are incredibly versatile. Use them for:

• External websites: Link to a social media profile, a partner site, or another project.
• Specific sections of a page: If you have a long page with anchor links (e.g., ZEALTERCODE0 on your homepage), you can link directly to that section.
• Placeholder links: If you want a top-level menu item that doesn’t link anywhere itself but serves as a parent for dropdowns (e.g., a “Services” menu item that only expands to show individual services, but isn’t clickable itself), you can use ZEALTERCODE0 as the URL.

1. Expand the “Custom Links” box.
2. In the “URL” field, enter the full URL (e.g., ZEALTERCODE0 or ZEALTERCODE1).
3. In the “Link Text” field, enter the display name for the menu item (e.g., “Twitter” or “Services”).
4. Click the “Add to Menu” button.

Example:

• URL: ZEALTERCODE0 , Link Text: ZEALTERCODE1 (if your blog page isn’t a static page)
• URL: ZEALTERCODE0 , Link Text: ZEALTERCODE1 (this will be a parent item for sub-menus, not a clickable page itself)

3.3 Adding Posts

You can add individual blog posts to your menu. While less common for primary navigation, it can be useful for linking to a cornerstone content piece or a “featured post.”

1. Expand the “Posts” box.
2. Select the post(s) you want to add.
3. Click “Add to Menu”.

3.4 Adding Categories and Tags

Linking directly to category or tag archives can be a powerful way to help users explore your content by topic.

1. Expand the “Categories” or “Tags” box.
2. Select the category/tag archive(s) you want to add.
3. Click “Add to Menu”.

Tip: You can mix and match these item types within a single menu. For most primary navigations, a combination of Pages and Custom Links (especially for external links or parent items) works best.

Step 4: Arranging Menu Items (Ordering)

Once you’ve added several items, they will appear in the “Menu Structure” box in the order you added them. You’ll likely want to reorder them to create a logical flow.

1. In the “Menu Structure” box, click and drag any menu item.
2. Move it up or down to change its vertical position in the menu.
3. As you drag, a dashed rectangle will indicate where the item will be placed.
4. Release the mouse button when the item is in its desired position.

Example Order: Home, About Us, Our Services, Blog, Contact Us.

Step 5: Creating Sub-Menus (Dropdowns)

This is the key step for creating dropdown navigation. Sub-menus are created by indenting an item underneath a “parent” item.

1. Identify the parent item you want to have a dropdown (e.g., “Our Services”).
2. Identify the child item(s) that will appear in the dropdown (e.g., “Web Design,” “SEO,” “Content Marketing”).
3. Click and drag a child item.
4. Instead of just moving it up or down, drag it slightly to the right (indent it) beneath its desired parent item.
5. When you see a dashed rectangle indicating an indentation, release the mouse button. The child item will now be labelled “sub item” below its parent.
6. Repeat for all other child items that belong to that parent.

Example Structure:

• Home
• About Us
• Our Services (Parent Item)
• Web Design (Sub Item)
• SEO (Sub Item)
• Content Marketing (Sub Item)
• Blog
• Contact Us

You can even create multi-level dropdowns (grandchildren) by indenting a sub-item further to the right under its own parent sub-item. However, for user experience, it’s generally recommended to stick to one or at most two levels of dropdowns. Too many levels can become cumbersome, especially on smaller screens.

Step 6: Configuring Menu Item Settings (Optional but Recommended)

Each menu item has a small arrow icon on its right. Clicking this arrow expands a panel of settings specific to that item.

By default, you might only see “Navigation Label” and “Original.” To unlock more useful settings, go to the very top right of your WordPress admin screen and click on “Screen Options”.

Check the boxes for:

• Link Target: Allows you to open the link in a new tab. This is particularly useful for external links so users don’t leave your site.
• CSS Classes: For advanced users who want to apply custom styling to specific menu items (e.g., making a “Donate” button stand out).
• Link Relationship (XFN): Used for advanced SEO and defining relationships between sites. (Less commonly used by beginners).
• Description: Allows you to add a description to a menu item. Depending on your theme, this might appear as a tooltip or sub-text under the menu item.

Once enabled, expand a menu item to see these options:

• Navigation Label: This is the text that appears on your menu. You can change it here without affecting the original page/post title. For example, a page titled “About Our Company” could have a “Navigation Label” of simply “About.”
• Title Attribute: This text appears when a user hovers over the menu item. It’s good for accessibility and provides extra context.
• Link Target: Check “Open link in a new tab” if desired.
• CSS Classes: Add space-separated custom CSS classes here.
• Description: Add a brief description for the menu item.

After making any changes, remember to collapse the item by clicking its arrow again.

Step 7: Assigning the Menu to a Location

Creating the menu is only half the battle; you need to tell WordPress where to display it on your website.

1. At the bottom of the “Menu Structure” box, you’ll see a section titled “Menu Settings”.
2. Under “Display location”, you’ll see a list of checkboxes. The exact locations available depend entirely on your currently active WordPress theme. Common locations include:

• Primary Menu / Main Navigation: Usually the main menu in your header.
• Footer Menu: A menu often used for legal links (Privacy Policy, Terms of Service) or secondary navigation.
• Mobile Menu: Some themes have a separate menu for mobile devices.
• Social Menu: For social media icons/links.

1. Check the box next to the location where you want your new menu to appear (e.g., “Primary Menu”).
2. Crucially, click the big blue “Save Menu” button.

If you have multiple menus or want to manage locations more broadly, you can also use the “Manage Locations” tab at the top of the “Menus” screen. This tab gives you a direct mapping of your theme’s available locations to the menus you’ve created.

Tip: If you assign a menu to a location and it doesn’t appear or looks odd on your site, it might be due to your theme’s specific styling or how it handles menus. Try clearing any caching plugins you might be using and refresh your site.

Step 8: Testing Your New Menu

The final and crucial step is to see your creation in action!

1. Open your website in a new browser tab or window (or refresh an existing one).
2. Locate your new menu. It should appear in the location you assigned (e.g., your website’s header).
3. Test all top-level links to ensure they go to the correct pages/posts/external sites.
4. Hover over items with sub-menus. Verify that the dropdowns appear correctly and that all sub-menu links also work as expected.
5. Check responsiveness: Resize your browser window to simulate different screen sizes (especially mobile phones). Ensure the menu adapts correctly and that the mobile menu (often a “hamburger” icon) functions properly, revealing the dropdowns.

If anything isn’t quite right, head back to the “Appearance > Menus” screen in your dashboard, make the necessary adjustments, and remember to click “Save Menu” again.

Tips and Best Practices for Navigation Menus

• Keep it Concise: Avoid overloading your main navigation with too many top-level items. Aim for 5-7 primary links. Use sub-menus to organize deeper content.
• Logical Structure: Group related content together. Think about your user’s journey and how they would naturally look for information.
• Clear and Descriptive Labels: Use straightforward language for your menu items. “Services” is generally better than “What We Do”; “Contact” is better than “Reach Out.”
• Prioritize Important Content: Place your most critical pages (like “Home,” “Services,” “Contact”) prominently.
• Mobile-First Approach: Always test your menu on various devices. Most modern themes handle mobile menus well, but always double-check dropdown functionality.
• Accessibility: Consider users with disabilities. Ensure your menu is keyboard-navigable and that screen readers can interpret its structure. (Using standard WordPress menu functionality generally covers many accessibility bases).
• Consistency: Once you’ve established your navigation structure, try to maintain consistency across your site.
• Less is More for Dropdowns: While useful, too many levels of dropdowns (more than 2) can make navigation confusing and difficult to use, especially on touch devices.

Conclusion

Mastering custom navigation menus in WordPress empowers you to craft a professional, intuitive, and highly functional website. By carefully selecting and arranging your content, and effectively utilizing dropdown sub-menus, you guide your visitors effortlessly through your site, enhancing their experience and helping them find exactly what they need. Experiment with different structures, always keeping your users in mind, and you’ll build a navigation system that truly shines.