Are you looking to add title attributes to your WordPress navigation menu items?
The title attribute allows you to provide extra information about a menu item. It often appears as tooltip text when a user’s mouse moves over the link.
In this article, we will show you how to add title attributes in WordPress navigation menus for both classic themes and block themes.
Why Add Title Attributes to Navigation Menu Items?
In WordPress, you can add a title attribute to better describe any HTML element. This is often used with links and images to provide extra information that appears as a tooltip when the user hovers their mouse over the element.
Here’s an example of an image title attribute displayed in a tooltip. The user can learn more information about the image by moving their mouse over it.
We also recommend you use the title attribute when adding links to your post. This allows users to see where the link will take them before they click it.
Some SEO experts believe that the link attribute is useful for search engine optimization (SEO) because it allows you to provide more context.
The title attribute may also be read out loud by screen readers that are used by visually impaired users. However, it is often ignored, and the anchor text is read instead.
With that being said, let’s take a look at how to add the title attribute in WordPress navigation menus. You can use the links below to jump to the method that works with your theme:
Adding a Title Attribute to Classic Theme Menu Items
If you are using a classic WordPress theme, then you can customize your navigation menu by visiting Appearance » Menus in your dashboard.
However, you are not able to add a title attribute to menu entries by default.
To add this capability, you will need to click the ‘Screen Options‘ tab in the top right corner of the screen. This will bring down a menu, where you need to click on the check box next to the ‘Title Attribute’ option.
This will add a title attribute field for when you create or edit a menu entry.
Now, you can scroll down and click on any menu item in your existing menu to expand it. You will see the title attribute field.
You can now add the text you want to use as a title. You can also expand other menu items and add title attributes to them.
Don’t forget to click on the ‘Save Menu’ button at the bottom of the page to store your changes.
You can now visit your WordPress website and take your mouse over a link in the navigation menu. You will see the title attribute displayed as a tooltip.
Adding a Title Attribute to Block Theme Menu Items
If you are using a block theme, then you can customize your navigation menu using the Full Site Editor. This editor allows you to add title attributes to your menu entries by default.
First, you need to navigate to Appearance » Editor in your WordPress admin area and then click on the ‘Navigation’ option to find your menus.
You will need to select the menu you wish to edit from the list.
Now, you can click the preview pane on the left to open the editor full screen. Make sure you can see the settings pane on the left. If not, then you can display it by clicking the ‘Settings’ button at the top of the screen.
Next, click the menu item in the settings pane that you wish to edit. This will display the options for that entry, including the title attribute.
Simply type your title into the ‘Title Attribute’ field.
Make sure you click the ‘Save’ button at the top of the screen to store the new settings. You will need to click a second ‘Save’ button to confirm.
Now, you can visit your website to see the menu title attribute in action.
Expert Guides for Customizing WordPress Navigation Menus
Now that you know how to add a title attribute in your navigation menu, you may like to see some other articles related to customizing the WordPress navigation menu:
Are you looking for a way to add social media icons to WordPress menus?
The logos for sites like Facebook and Twitter are instantly recognized by people all over the world. By adding these icons to your menus, you can promote your social media profiles in an eye-catching way that doesn’t take up a lot of space.
In this article, we will show you to add social media icons to WordPress navigation menus.
Why Should You Add Social Media Icons to Menus?
By adding social media icons to your website, you can encourage people to visit your different social networking profiles. This can get you more followers and engagement across Facebook, Twitter, Instagram, and more.
One option is to add social media icons to your WordPress sidebar or a similar widget-ready area. However, when people want to visit a new page, they typically look at your navigation menu first.
By adding social media icons to your WordPress menus, you can often get more clicks, engagement, and followers across all your social media profiles.
Social media icons can also grab the visitor’s attention without adding extra text to your menus. This allows you to promote lots of different profiles in a small amount of space.
That being said, let’s take a look at how to easily add social media icons to WordPress menus.
Video Tutorial
If you prefer written instructions, just keep reading. Simply use the quick links below to jump straight to the method you want to use:
When creating your social icons, you can use any image that you have uploaded to the WordPress media library.
For example, many of the top social media companies provide logos that you can use on your website, such as the Twitter brand toolkit. You can also download icons from online libraries like the Font Awesome website.
Menu Image also integrates with the Font Awesome plugin. This allows you to browse and import all the Font Awesome icons directly from the WordPress dashboard, including icons for all the major social networks. For this reason, we recommend installing the Font Awesome plugin.
No matter how you plan to provide the social media icons, you will need to install and activate the Menu Image plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, you may want to take a look at the icon sizes and change them if necessary. To do this, you need to go to Menu Image » Menu Image.
When creating your social icons, you can use any of the default WordPress image sizes, such as thumbnail, image, or large. Menu Image also lets you choose between three unique sizes that are set to 24×24, 36×36, and 48×48 pixels by default.
These sizes should work well for most WordPress websites, but you can change them by typing different numbers into the 1st, 2nd, or 3rd Menu Image fields.
With that done, click on ‘Save Changes’ to store your settings.
To add icons to a navigation menu, head over to Appearance » Menus. By default, WordPress will show your site’s primary menu.
If you want to add social media icons to a different menu, then just open the ‘Select a menu to edit’ dropdown.
You can then choose a menu from the list and click on ‘Select.’
To start, you will need to add each social profile to your menu as a new link.
When you are ready, click to expand the ‘Custom Links’ section and then type in the address of the social media page you want to use. For example, you might enter the URL of your Facebook group or YouTube channel.
You will also need to type in some ‘Link Text’. In a later step, you will have the option to change where this title appears in the menu or even hide it completely.
With that done, click on ‘Add to Menu.’
This item will now appear in the right-hand column.
To add a social media icon, simply hover over the new menu item.
Then, click on the ‘Menu Image’ button when it appears.
Note: If you don’t see a ‘Menu Image’ button, then click on ‘Save Changes’. Now, the ‘Menu Image’ button should appear when you hover over any item in the menu.
You can now decide whether to use an image from your WordPress media library or an icon provided by Font Awesome.
To use a ready-made Font Awesome icon, click on the radio button next to ‘Icon’.
Then, select ‘Fontawesome’.
You can then click on ‘Brands’.
You will now see all the branded icons, including icons for all the major social networks. When you see the image you want to use, just give it a click.
Another option is using your own icon from the WordPress media library by selecting the ‘Image’ radio button. Then, click on the ‘Set Image’ link.
You can now either choose an image from the WordPress media library or upload a new file from your computer.
No matter where you get the icon from, Menu Image will show a preview on the right.
You can now change whether the link title appears above, below, before, or after the social media icon using the ‘Title position’ settings.
Many social media icons are instantly recognizable, so the link title may be unnecessary. If you are adding lots of social icons to a navigation menu, then titles can even make your menu look more messy and complicated.
With that being said, you may want to hide the title by selecting the ‘Hide’ radio button.
As you make changes, the live preview will update automatically, so you can try different settings to see what looks the best.
Finally, if you are using your own image, then you can resize the social media icons using the ‘Image Size’ dropdown.
Bigger icons will grab the visitor’s attention, but they can also be distracting. With that in mind, you may want to try different sizes to see what works best on your WordPress blog.
When you are happy with how the social media icon is set up, simply click on ‘Save Changes’.
Simply repeat these steps to add more icons to your WordPress menu.
You can even add icons to other important items in the navigation menu. For example, you might add icons to your contact form or WooCommerce checkout page.
When you are happy with how the menu is set up, just click on ‘Save Menu.’
Now, you can visit your website to see the new social media icons in action.
This is how it looked on our demo website.
Method 2: Using the Full Site Editor (Block Themes Only)
WordPress has a built-in Social Icons block that allows you to create a menu containing social media icons and then display them in a nice layout.
This block comes with built-in icons for all the major social networks, so you don’t need to install a plugin like Font Awesome or upload icons to your media library. However, you can only add social media icons and links to the Social Icons block, so it isn’t as flexible as the Menu Image plugin.
If you are using a block theme, then you can add a Social Icons block to any part of your website, such as the header or footer. In this way, you can show a social media menu across your entire website.
To get started, head over to Appearance » Editor in the WordPress dashboard.
By default, the full site editor shows your theme’s home template, but you can add social icons to any template or template part. You can even add social media icons to parts of your website you can’t edit using the standard WordPress content editor.
For example, you can add a social media menu to your site’s 404 page template.
To see all the available options, you need to select either ‘Templates’ or ‘Template Parts’.
You can now click on the template or template part that you want to edit.
As an example, we will add social media icons to the WordPress header, but the steps will be the same no matter which template you select.
After making your choice, WordPress will show a preview of the template or template part.
To continue, click on the small pencil icon.
With that done, click on the blue ‘+’ icon in the top-left corner.
In the search bar, you must type in ‘Social Icons.’
When the right block appears, drag and drop it onto the theme template.
To add the first icon, just click on the ‘+’ icon inside the block.
In the popup that appears, type in the icon you want to add, such as ‘Twitter’ or ‘Facebook’.
When the right icon appears, simply click to add it to your WordPress blog.
Now, click on the new social media icon.
This opens a small bar where you can type in the URL you want to link to, like your Facebook page.
To add more social icons to WordPress, simply click on the ‘+’ icon and repeat the same process described above.
After adding all the social media icons, you may want to customize the block. To do this, click to select the Social Icons block and then click on the ‘Block’ tab.
You can change the icon’s justification, alignment, and orientation using the ‘Layout’ settings.
By default, all the social media links will open in the same tab. To keep visitors on your website, you may want to click to enable the ‘Open links in new tab’ toggle.
By default, WordPress shows the social icons only, without any text.
If you want to show text next to each icon, then click to enable the ‘Show labels’ toggle.
Next, click on the ‘Styles’ tab.
Here, you can change the button style by clicking on ‘Default’, ‘Logos Only’, or ‘Pill Shape’.
Finally, you can change the space between the social icons using the settings under ‘Block Spacing’.
When you are happy with how the menu looks, click on the ‘Save’ button.
Now, if you visit your website, then you will see the social media icons live.
Bonus: How to Promote Your Social Media Profiles
Adding social media icons to WordPress menus is a great way to get more followers and engagement across your different accounts. However, there are lots more ways to promote your Twitter, Facebook, and other social profiles.
The best way to get more followers and engagement is by embedding a live social feed on your website. This allows you to show the latest posts from multiple accounts, along with buttons that visitors can use to engage with your posts or follow you on social media.
The best way to add social media feeds to your website is by using Smash Balloon. It’s the best social media feed plugin for WordPress and lets you embed live feeds from Twitter, Instagram, Facebook, and more.
Do you want to add a mega menu on your WordPress site?
Mega Menus allow you to arrange dozens or even hundreds of links into user-friendly columns and rows. You can then add rich content like images and videos, to make your mega menus even more helpful.
In this article, we will show you how you can add a mega menu to your WordPress website, step-by-step.
If your site has lots of content then you may need to create a mega menu instead. These mega menus allow you to add multi-column dropdowns to the WordPress navigation.
You can use mega menus to organize your content under different headings and subheadings, so visitors can find exactly the page they’re looking for. For example, if you create an online marketplace then you might arrange all your product categories and subcategories in a mega menu.
This helps shoppers find the exact product category they want, and make a purchase.
Mega menus can also show rich content to your visitors, such as videos, text, search, and recent posts.
Many websites use images, too, because they make mega menus easier to scan. Even if you’re showing dozens of menu items, dividing them into columns and then adding a relevant image can help visitors find exactly the content they’re looking for in seconds.
That said, let’s see how you can easily add a mega menu to your WordPress website.
The easiest way to add a mega menu on your WordPress site is by using Max Mega Menu. This plugin allows you to add rich content to your mega menus, including images, text, galleries, and more.
In this way, you can create more engaging and helpful menus.
You can also style every part of the mega menu by adding different colors, changing the font size, and using different icons.
First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.
Enable Mega Menus on Your WordPress Website
Upon activation, go to Mega Menu » Menu Locations to see all the different areas where you can add a mega menu.
You may see different options depending on your WordPress theme.
To start, you’ll need to enable mega menus in every location where you want to use them.
To do this, simply click to expand a location and then check its ‘Enabled’ box.
After that, you can change the ‘Event’ that’ll open the mega menu.
The default setting is ‘Hover intent,’ which means the visitor must hover their mouse over the mega menu for a few seconds. This works well for most WordPress websites, but you can also open the ‘Effect’ dropdown and choose ‘Hover’ or ‘Click’ instead.
If you choose ‘Click’ then the visitor will need to click to explore the mega menu. This can be useful if you’re worried visitors might trigger the menu by accident, which can be frustrating.
Meanwhile, ‘Hover’ will open your mega menu as soon as the visitor moves their mouse over it. This can encourage visitors to explore different areas of your site, so you may want to use ‘Hover’ on landing pages or your website’s homepage.
After making this decision, you can change how the menu opens using the ‘Effect’ settings.
Max Mega Menu has different animations you can try, including fade and slide up. You can also change the animation’s speed. By trying different animations, you can create a mega menu that grabs the visitor’s attention.
If you don’t want to use any animations, simply open the first dropdown and select ‘None.’
By default, Mega Menu doesn’t use animations on mobile devices to prevent performance issues. If you want to create a unique animation for mobile visitors, then you can use the settings in the ‘Effect (Mobile)’ area.
Also, if you set the ‘Event’ dropdown to ‘click,’ then make sure you select the ‘Advanced’ tab next.
Here, you can use ‘Click Event Behavior’ to define what happens when the visitor clicks your mega menu. For example, the second click might close the menu or open a new link.
There are more settings you can look through, but this should be enough for most WordPress blogs and websites.
When you’re happy with how the plugin is configured, click on ‘Save Changes.’
To enable mega menus for more locations, simply follow the same process described above.
Customize How the Mega Menus Looks on Your Website
The next step is configuring how the mega menus will look on your website.
You can do this by selecting the ‘Menu Themes’ tab to the left of the screen.
On this screen, you can change the direction of the arrow icons, use a different line height, and add a shadow.
When you’re happy with your settings, don’t forget to click on ‘Save Changes.’
If you want to remove these changes at any point, then simply check the ‘Reset Widget Styling’ box and then click on ‘Save Changes.’
Next, you can customize the menu bar, which is the bar visitors see when the menu is in its default, collapsed state.
To make these changes, click on the ‘Menu Bar’ tab and then use the settings to change its background color, padding, border radius, and more.
You can even create a color gradient by selecting two different colors in the ‘Menu Background’ section.
If you scroll down, then you can change how the top-level menu looks.
This is the first row of items, which is visible when the mega menu is in its collapsed state.
Since they’re so important, you might want to make the top-level menu items stand out.
For example, in the following image, we’re using a different background color.
In the ‘Hover State’ section you can highlight the currently-selected top-level menu item.
For example, in the following image, we’re using an underline effect.
This can help the visitor see where they are in the menu, which makes it particularly useful for sites that need to have large mega menus.
If you do add a hover state, then scroll to the bottom of the screen and check the ‘Highlight Current Item’ box.
After that, you can change how the submenu looks.
This is the menu that appears under a top-level parent, as you can see in the following image.
To customize the submenu, click on the ‘Mega Menus’ tab.
You can now use these settings to change the submenu’s background color, increase the radius to create curved corners, add padding, and more.
You add content to your mega menus using widgets. For example, you might add a Gallery widget and display your most popular WooCommerce products, or embed a tag cloud inside the mega menu. These widgets can provide extra information, or encourage visitors to click on certain menu items.
You can customize how these widgets will look by scrolling to the ‘Widgets’ section. For example, you might change the color of the widget’s title, increase the font size, add padding, and adjust the alignment.
On this screen, you can also customize how the second-level menu items and third-level menu items will look on your website. These are the children of the top-level menu items.
When building your menus, it’s possible to add four or even more levels to create a nested mega menu. If you do this, then WordPress will simply use the third-level styling for all the subsequent levels.
You can see this in action in the following image. The second level has red text, and both the third and fourth levels use the same yellow text.
When you’re happy with how the menu is set up, don’t forget to click on ‘Save Changes.’
How to Add a Mega Menu on Your WordPress Site
Once you’ve finished customizing the mega menu using Max Mega Menu, it’s time to add it to your website.
Simply head over to Appearance » Menus.
If you want to turn an existing menu into a mega menu, then open the ‘Select a menu to edit’ dropdown and choose it from the list. Just be aware the menu you choose must be assigned to a location where you’ve enabled the mega menu feature.
If you want to start from scratch, then click on ‘Create a new menu’ and then type in a title for your new mega menu.
You can then select the location you want to use, and click on ‘Create Menu.’ Once again, this must be a location where you’ve enabled mega menus.
Add Content to Your WordPress Menu
After that, add all the pages, posts, and any other content you want to include in the menu. For step-by-step instructions, please see our beginner’s guide on how to add a navigation menu in WordPress.
Next, you’ll need to arrange your items into parents and submenus. To create a submenu, drag an item below the parent, and then drag it slightly to the right before releasing it.
To create multiple levels, simply keep dragging items to the right so they appear indented below one another. This is similar to creating a dropdown menu in WordPress.
No matter whether you’re creating a new menu or updating an old one, at this point you’ll have all the items you want to include in the mega menu.
Enable the Mega Menu Feature
With that done, click to expand the ‘Max Mega Menu Settings’ and check the box next to ‘Enable.’
In this box, you can also override the default mega menu settings. This allows you to create unique mega menus for different areas of your site, so go ahead and make any changes.
After that, click on ‘Save.’
Create the Mega Menu Layout
Now, hover your mouse over the first top-level item and you’ll see a new ‘Mega Menu’ button. Go ahead and give the button a click.
You will now see all the settings for this top-level item.
By default, Max Mega Menu will use the flyout style, where the submenus ‘flyout’ from the side. To create a mega menu instead, open the ‘Sub menu display mode’ dropdown and choose either ‘Standard Layout’ or ‘Grid Layout.’
Standard layout shows all the submenus in columns.
Meanwhile, grid layout allows you to organize submenu items into columns and rows.
This is ideal if you want to show lots of content, or have a very specific layout in mind.
After selecting the standard or grid layout, you’ll see all the submenus assigned to this parent.
Now, you can go ahead and change how these items are arranged in the mega menu.
If you’re using the standard layout, then you can change the number of columns using the dropdown menu in the top right corner.
If you’re using a grid layout, then you can add columns and rows using the ‘+Column’ and ‘+Row’ buttons.
When you’re happy with the layout, you can arrange the submenu items into different columns and rows using drag and drop.
After that, it’s time to change how much space each item takes up in the column. Max Mega Menu shows the current size as a fraction of the total available width.
For example, in the following image, both columns take up half the available space.
To make an item bigger or smaller, simply click on its arrow buttons to increase or decrease the fraction.
Create a Mobile-Friendly Mega Menu (Grid Layout Only)
By default, Max Mega Menu will show the same content on desktop and mobile devices. This can be a problem with grid layouts, as smartphones and tablets typically have smaller screens, and scrolling horizontally can be difficult.
If you’re using the grid layout, then you can create different mega menus for mobile devices. For example, you might use fewer columns so users don’t have to scroll horizontally.
You can hide entire columns or rows using the ‘Hidden on mobile’ icon, which looks like a small mobile phone.
Simply toggle the icon on and off, to hide and show different content on desktop and mobile.
Add Rich Content with Mega Menu Widgets
With that done, you can start adding widgets to the mega menu. This allows you to show extra content in the submenu, such as WordPress galleries, text, videos, recent comments, and more.
For example, you might use images to promote a sale on your online store, or highlight your latest products.
To add a widget, simply click to open the ‘Select a widget….’ dropdown.
You can now choose a widget from the list.
WordPress will add the widget to a column or row automatically, but you can move it to a new location using drag and drop.
To configure the widget, go ahead and click on its little wrench icon.
This opens a popup where you can add content to the widget and change its settings.
You’ll see different options depending on the kind of widget you’re creating.
For example, if you added an Image widget, then you can click on ‘Add Image’ and either choose a picture from the media library or upload a file from your computer.
If you add a ‘Text’ widget then you’ll see a small editor where you can type in your text.
All widgets have a ‘Title’ field where you can add text that will be displayed above the widget.
When you’re finished, click on ‘Save’ to store your changes and then select ‘Close.’ To add more widgets to the mega menu, simply follow the same process described above.
Review the Default Mega Menu Settings
Next, just click on the ‘Settings’ tab.
Here, you can use checkboxes to hide or show different content in the submenu.
You can also hide or show the submenu on mobile devices and desktop, and change the alignment so the submenu opens to the left or right of the top-level parent.
If you make any changes to the default settings, then don’t forget to click on ‘Save Changes.’
Add Image Icons to the WordPress Mega Menu
Image icons help visitors understand what a menu item is about, without even having to read the navigation label. This is particularly useful for large menus where a visitor may prefer to scan the content quickly rather than reading each navigation label.
You can use icons to make the most important content stand out. For example, you might encourage visitors to complete their purchase by adding a cart icon to the ‘Checkout’ menu.
You can now choose any dashicon from the built-in library. If you upgrade to Max Mega Menu pro, then you’ll also have access to other icon fonts, Genericons and FontAwesome, or you can choose a file from your WordPress media library.
Finish Configuring the Mega Menu on Your WordPress Site
After working your way through all these settings, you can close the popup window to return to the main Appearance » Menus page.
You can now repeat this process for each top-level parent.
When you’re happy with how the mega menu is set up, click on the Save Menu button to make it live.
Now, simply visit your website to see the mega menu in action.
However, if you run an online store or a large website, then you may want to add more links to the navigation menu.
Dropdown menus help you solve the limited space issue by showing menu links only when users bring their mouse over to a parent item. They also allow you to organize the menu structure by topics or hierarchy.
Lastly, they look pretty nice too.
That being said, now let’s take a look at how you can easily create WordPress dropdown menus add them to your website.
Step 1. Choosing a Theme with Dropdown Menu Support
WordPress comes with a built-in menu management system but displaying those menus is entirely dependent on your WordPress theme.
Almost all WordPress themes support dropdown menus by default. However, some themes may not have proper menu support.
You need to make sure that you are using a WordPress theme that supports dropdown menus.
How do you know if the theme you are using supports the dropdown menu?
You can simply visit the theme’s website where you’ll find a link to the theme’s demo. From there you can see if the demo is showing a dropdown menu in the navigation menu.
If it is not, then you’ll need to find a WordPress theme that does.
Here are a few excellent themes that support the dropdown menu out of the box.
Astra – It is a multipurpose WordPress theme that comes with several starter sites and tons of features.
StudioPress themes – Built on top of genesis theme framework, these professional themes are highly optimized for performance.
OceanWP – A popular WordPress theme that is suitable for all kind of websites.
Ultra – Powered by Themify builder this drag and drop WordPress theme comes with beautiful templates and flexible theme options.
Divi – popular theme by Elegant Themes that uses the Divi page builder and comes with tons of drag & drop features including dropdown menus.
That being said, now let’s take a look at how to create a dropdown WordPress menu.
Step 1. Creating a Navigation Menu in WordPress
If you have already set up a navigation menu on your website, then you can skip to the next step.
Let’s create a simple menu first.
Go to Appearance » Menus page and click on the ‘Create a new menu’ link at the top.
Next, you need to provide a name for your navigation menu. This name will not be publicly visible on your website. The purpose of menu name is to help you identify the menu inside the WordPress admin area.
Enter a name for your menu and then click on the ‘Create Menu’ button.
WordPress will now create a new empty menu for you.
Let’s add the top links to the navigation menu. These items will appear in the top row of your menu.
Simply select the pages you want to add from the left column and click on the ‘Add to menu’ button. You can also select blog posts, categories, or add custom links.
You will now see those pages appear in the right column under your new menu.
Step 2. Adding Sub-Items to a Menu
Sub-items are the items that will appear inside the dropdown menu. Depending on how you want to organize your menus, you can add them under any of the existing items.
For the sake of this tutorial, we will be adding categories under the blog link.
Simply select the items you want to add from the left column and then click on the ‘Add to menu’ button. Your items will now appear in the right column.
However, these links will appear as regular items. We need to make them a sub-item of a parent menu.
You can simply drag and drop a menu item and place it under the parent item. Move it slightly to the right, and it will become a sub-item.
Repeat the process for all links you want to show under the dropdown menu.
Once you are done, don’t forget to click on the ‘Save menu’ button to store your changes.
Step 3. Publish Your Dropdown Menu
If you are editing a menu that’s already live on your website, then it will start appearing on your website right away.
However, if it is a new menu item, then you now need to choose a theme location to display this menu.
WordPress themes can show menus at different locations. Each theme defines their own menu locations, and you can select which menu you want to display there.
You’ll find this option in the right column under ‘Menu settings’. Select an option next to the ‘Display location’ setting and click on the ‘Save menu’ button.
You can now visit your website to see your dropdown menu in action.
Tips on Creating Interactive Dropdown Menus
Navigation menus are important because this is the first place your users will look if they want to see specific information.
Using them correctly will help your users find their way around your website. It will also help you get more pageviews, conversions, and sales on your website.
Here are a few tips on making your navigation menus more interactive with dropdown menus.
1. You can create multi-level dropdown menus
Making a link a sub-item of another link makes it appear in the dropdown menu. You can also add a sub-item below another sub-item to create multi-level dropdown menus.
Your theme would automatically show them as a sub-menu inside the dropdown.
2. You can also create multiple dropdown menus
You can create a dropdown under any top link in your menu. You can even add multiple dropdown menus in your main navigation menu.
3. Create menus with a live preview
If your menu gets too complicated, then you can switch to the visual preview. Go to Appearance » Customize to launch the live theme customizer.
From there, click on the ‘Menus’ tab and then select your navigation menu. You’ll now see a drag and drop menu editor in the left column with a live preview of your site in the right panel.
4. Creating a large mega menu as dropdown in WordPress
The dropdown menus only show one dropdown at a time. What if you wanted to show the full structure of your website as a mega menu that only appears when users hover on the main menu?
Mega menus do appear as a dropdown menu, but they can show a lot more links, sub-menus, and more. For detailed instructions, see our step by step tutorial on how to create a mega menu in WordPress.
