{"id":35653,"date":"2020-01-20T12:40:38","date_gmt":"2020-01-20T12:40:38","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=35653"},"modified":"2025-12-04T11:02:47","modified_gmt":"2025-12-04T09:02:47","slug":"wordpress-nav-menu-design","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/wordpress-nav-menu-design\/","title":{"rendered":"Monday Masterclass: How to Design Navigation Menus for WordPress"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tDiscover How To Add Breadcrumbs for Better Navigation <\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Initially, website menus are a navigational tool<\/a> to help users find what they\u2019re looking for on our websites. Because of their basic functionality, and because we know how users rely heavily on them, what was once a mundane optional feature is now a crucial piece of design that is vital to the success of any website.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

What Makes Navigation Menu Design so Important?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Understandably, both web builders and search engines have invested interest in how menus work, and how users engage with them. Knowing this not only helps us create better user experience, but also helps us use navigation menus to our advantage.<\/p>

To misquote John Donne<\/a>: \u201cNo site is an Island.\u201d\u00a0<\/p>

We don\u2019t build sites in a vacuum. We build sites to draw traffic and it\u2019s no secret that the way to draw traffic is by anticipating the behavior of our target audience.\u00a0<\/p>

However, when designing websites in general, and menus specifically, we must remember that we are targeting two equally important types of audiences: Humans and Bots.\u00a0<\/p>

These bots are known as spiderbots or web crawlers, and their job is to roam around the Internet, visiting sites, indexing the content that they find, and reporting back to Search Engines on levels of user experience and content.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Google_site_crawlers_Organising_web_content__WordPress_Monday_masterclass\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Source: Google Search<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

It\u2019s true that bots are designed to mimic human behavior when visiting sites. This is in order to gather more accurate data that then helps search engines point human users to sites most likely to offer them the best experience, and most reliable information. <\/p>\n

I suppose that you could say that it works a bit like word-of-mouth among human visitors.
We see a site that answers certain needs, and tell others about that site when we come across someone with similar needs.<\/p>\n

As such, having too many options in a menu makes it difficult for web crawlers to do their job and systematically browse and index everything they find on our sites.<\/p>\n

This is why \u201cease of navigation\u201d is one of the most valuable contributors to this user experience, and consequently vital to our SEO ranking, boosting traffic, and perhaps even rewarding us with rich snippets.<\/p>\n

Having understood the importance of custom navigation menus<\/a>, we\u2019ll review the primary styles of navigation menu on WordPress websites, understand when to use them, and go over the important Do\u2019s and Don\u2019ts, while we\u2019re at it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

5 Primary Styles of Navigation Menu<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

It\u2019s important to see these primary styles the same way that we think of primary colours. They are the basic components or ingredients that we can combine, mix and match, in so many ways to eventually create a vast array of variety.<\/p>

I always feel the best place to begin is with the classics.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

1. Classic Navigation Menu<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

A classic nav-menu will typically appear in the site\u2019s header. On one-page sites, it could appear as a part of the top section of page itself. <\/p>\n

We usually classify a nav-menu as Classic when it is static, remaining anchored at top<\/a> (or bottom) of the page, the only place that we\u2019re going to see it. A more practical characteristic of classic menus is their level of simplicity. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Classic_Nav_Menu_WordPress_Monday_Masterclass.960\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Source: Gray & Company<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

There\u2019s nothing complex about the classic nav-menu\u2019s layout, or the design.\u00a0<\/p>

We\u2019ll see category labels in the top level, each leading to drop down or cascading sub-levels.\u00a0<\/p>

The main advantage of the classic style menu is that users are extremely familiar with it, and therefore it will make life very easy for them and for our web crawlers. As such, this makes it a great choice for marketplace websites, or websites with lots of categories of information.\u00a0<\/p>

One downside to the classic nav-menu is the amount of information that this style is usually synonymous with. Some users may find these menus tedious, perhaps overwhelming, and prefer to use the search option, or even bounce altogether.<\/p>

This is especially true of a variation of the classic style navigation menu, the supersized classic menu, commonly known as a Mega Menu<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Mega_Menu_WordPress_Monday_masterclass\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Source: Envato<\/a> Market<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The main downside to this style is that it’s not mobile responsive<\/a>. Whatever style of menu we choose, we must always consider the mobile version of the site.\u00a0<\/p>

In previous masterclasses we’ve spoken about the importance of responsive design<\/a> – especially now that Google has shifted its preference and higher ranking to \u201cMobile first<\/a>\u201d sites.\u00a0<\/p>

These are sites that are initially designed for mobile, then adapted for desktop rather than the other way round.\u00a0<\/p>

What most web-building experts do to solve this problem, is create two types of menu in Elementor<\/a> for their website. Then, using the responsive settings, the classic menu will be hidden when viewing the site on mobile, and only the purpose designed mobile menu will be visible in responsive mode.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"Classic_responsive_\t\t\t\t\t\t\t\t\t\t\t
Example of single header with two nav-menus; The top is set to be hidden on Tablet and Mobile views.<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

2. The \u201cHamburger\u201d or Icon Navigation Menu<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

A very popular style of menu for responsive views is hiding a collapsable menu behind a menu icon, fondly known as a Hamburger icon.<\/p>

As users and designers, we love this style of nav-menu. It takes up an absolute minimum of screen space, it doesn\u2019t dominate the page.\u00a0<\/p>

Moreover, it hides all the clutter of categories when all we want to do is focus on the content of the page, at least until the menu is needed. Then it\u2019s merely a matter of clicking or tapping on the icon to reveal a clear dropdown.<\/p>

Using a hamburger icon is a great way to go if you\u2019re designing a nav-menu to contain lots of category labels. If you only have 2 or 3 categories, each leading to minimal or no families, you might want to consider a different menu style.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\"Hamburger_responsive_
Source: KBS<\/figcaption><\/figure><\/a><\/div>
\"Hamburger_responsive_
Source: KBS\n<\/figcaption><\/figure><\/a><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Some designers like to stylize their hamburger icon. I\u2019m sure that you\u2019ve seen this as a hand-drawn icon, or made up of several colors.<\/p>

This is fine, so long as it\u2019s recognizable as a menu icon.<\/p>

Remember, most users are not you, and their job isn\u2019t to figure out the way that we think.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

3. The \u201cSticky\u201d Navigation Menu<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

If we are tasked with designing a menu that is always visible no matter where we are on the page, then what we need is a sticky menu<\/a>.<\/p>

These are menus that seem to stick to the screen, floating above the pages as they scroll past.<\/p>

This makes them perfect for long pages. The user will always have the navigation options right in front of them instead of having to scroll back to the top of the page.\u00a0<\/p>

Turning a static menu bar into a sticky is easy. In Elementor, it\u2019s just a matter of checking a box in the advanced settings.<\/p>

While these are a very popular style of nav-menu, for both desktop and some mobile sites, there are some down sides to sticky menus. Most obviously, a menu bar that travels down the page will continuously conceal a chunk of screen real estate. Some designs solve this issue by placing the menu in a section with a low opacity, full transparency.\u00a0<\/p>

Unfortunately, this solution is not always perfect. We must make sure that we contrast the colors of the menu bar with the colors of the page. Otherwise, our menu will disappear. Also avoid creating the opposite extreme by using colors that clash. Again, we don\u2019t want to draw too much attention away from the page and towards the menu.<\/p>

Then again, sometimes the goal of our design is just that, and steer the user to the menu.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

4. The Popup Navigation Menu<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

If there\u2019s one style that has the best chance of upstaging the rest of a page, that style of nav-menu is the Popup.\u00a0<\/p>

Many of you will remember that we used this style in our recently released Travel Agent template kit<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\"Popup_responsive_
Source: Travel Agent (template kit)<\/figcaption><\/figure><\/a><\/div>
\"Popup_responsive_
Source: Travel Agent (template kit)<\/figcaption><\/figure><\/a><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The simple way that we create these in Elementor by placing our nav-menu widget in a popup, and in the popup\u2019s conditions, set the trigger to On Click<\/strong>, and save. Then we add a button or icon on our page, or header. In the button\/icon widget\u2019s settings, we use the dynamic options to set the button\u2019s action to Open Popup<\/strong>, and select the popup that we dedicated as our menu.<\/p>

Closing the popup is, of course, something that we define in the popup\u2019s settings, in the Elementor edit panel. This would be a good time to mention that if you\u2019re using this style, make sure that the close icon or button is clear and easy to use, especially in responsive mode.<\/p>

As you might have realised, all of these styles of navigation menu can be used both horizontally (across the screen, top or bottom), and vertically (down the side of the screen), equally.<\/p>

There is of course a debate among UX experts as to whether or not vertical or side screen menus should be used. Those in favor of them, will point out that we use them all the time, we even have one in WordPress.<\/p>

Those opposing side-screen menus, make a point that they are detrimental to mobile user experience.<\/p>

However, there are some great uses of popup menus that slide in from the side in responsive mode.\u00a0Unfortunately, they are also less fashionable these days. Though they still appear in sites that are designed to be viewed or scrolled through horizontally, like some portfolio sites.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

5. The Two-Tier Navigation Menu<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The Two-Tier nav-menu appears in two, usually contrasting, tiers, rows, or sections, so to separate two or more menu widgets<\/a>, or groups of categories. As such, at least to my knowledge, this menu style only appears horizontally in either headers or footers.\u00a0<\/p>

We would use the two-tier style if, we were designing an online store<\/a> for example, and wanted to create one menu for clothing and accessories (by gender, age and occasion, etc.), and another for our about, FAQ, pages and so on.<\/p>

We would create the two menus on the WordPress dashboard (Appearance>Menus). Then, in the Elementor editor, we then build a header with 2 sections. Into each section we drag a nav-menu widget, and assign one of the menus to each widget.\u00a0<\/p>

You can achieve the same result just as easily using only one menu in one tier, and adding button widgets or an icon list to the second.<\/p>

Again, there are those who feel that this style of menu is confusing to users. Personally, I find this style very convenient. In fact, if you’ve had a chance to check out the template kit we released last week, for Online Magazines<\/a>, you can see what I mean<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"Two-Tier_\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t
Online Magazine (template<\/a> kit)<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Important Do\u2019s & Don\u2019ts When Designing Nav-Menus<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t