Navigational Links

These are the most popular internal links, and they help structure your website and guide the reader through the content. Every page of your website has navigation links.

Single-Bar Navigation

The simplest, while not necessarily most common, global nav design is the single, plain bar. This bar has all navigation links in one row and is usually limited to around 10 links.

If you’re thinking in purely SEO terms (don’t), this is the ideal navigation. The links are immediately visible to search engine crawlers, there’s no worry of them getting buried in a poorly coded dropdown structure, and there’s a nice, small number of them.

Pros

• Links are easily crawled by search engines
• Important pages are clearly outlined to users
• No risk of diluting link authority  with too many links

Cons

• VERY limited in the number of links you can use (realistically only viable for small sites, or sites with a small number of important pages)

Double-Bar Navigation

This is only slightly more complex than the single navigation bar. Instead of one bar, you use two. Some might refer to this as the primary and secondary navigation, but for the purposes of this post, I’ll count them as one global navigation.

This is a pretty good “best of both worlds” solution. Using two global navigation bars gives you twice the space for links or more, depending on how you style the second bar. And, same as the single-bar solution, you don’t have to worry about a lazy developer (just kidding, I love you all, devs) coding a dropdown incorrectly, making it invisible to crawlers.

Let me restate that because it’s important:  

 Yes, you can accidentally make your navigation invisible to search engines by coding a navigation dropdown incorrectly.

Pros

• Links are easily crawled by search engines
• Important pages are clearly outlined to users
• Low risk of diluting link authority with too many links

Cons

• Design can appear cluttered if done improperly
• Lack of dropdowns prevents grouping of topics

Dropdown Navigation

A dropdown menu is designed so that when a user hovers over (or, in some cases, clicks) a nav item, a secondary list of links drops down. Dropdown menus are probably the most common way to structure a site’s main navigation.

For a lot of bigger sites, this is the only way you can possibly link to all the important pages without overwhelming a user with choices. However, as I’ve alluded to already, if you go this route, you introduce the risk of hiding all of these great, descriptive, sitewide links from search engines.

For instance, some crawlers (not Googlebot!) may run into issues trying to get to your dropdown links if they’re coded in JavaScript. In other cases, users may not know to expand the dropdown with a hover, or they may simply not be able to if they’re using a tablet or other wide-display touchscreen device.

Pros

• Provides room for dozens of links
• Related pages can be grouped together
• Design is less cluttered when dropdowns are retracted

Cons

• Crawlers may have trouble finding links in dropdowns
• Poorly done dropdowns make for bad user experience
• Hover doesn’t work for touchscreen users
• Link authority may be diluted with too many links

Dropdown Navigation with Flyouts

This is the most complex menu structure, and it’s the easiest to mess up. Flyout navigation menus are just like dropdowns, except that a tertiary set of links flies out when you hover over one of the links in the dropdown.

Flyout menus have many of the same benefits and downsides as do plain dropdowns.

It’s about equally as easy for links to be hidden from crawlers by JavaScript with a flyout vs a dropdown, but it’s even easier for users to run into a frustrating experience. To paint a picture, how many times have you hovered over a flyout and moved your cursor just the wrong way only to watch the entire menu retract?

If your flyout menu feels like a maze game you have to win with pixel-perfect cursor moves, maybe you should rethink either structure or design.

Pros

• Provides room for dozens or hundreds of links
• Related pages can be grouped together
• Design is less cluttered when dropdowns and flyouts are retracted

Cons

• Flyouts are difficult to do well and can create terrible user experience
• Too many links can overwhelm users and dilute link authority
• Crawlers may have trouble finding links in dropdowns and flyouts
• Hover doesn’t work for touchscreen users