without the flyout menu items?\n<\/p><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n
<\/p>\n
<\/p>\n
<\/p>\n
Flyout menus have many of the same benefits and downsides as do plain dropdowns. <\/span><\/p>\nIt’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<\/em> hovered over a flyout and moved your cursor just the wrong way only to watch the entire menu retract? <\/span><\/p>\nIf 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. <\/span><\/p>\nPros<\/span><\/h4>\n\n- Provides room for dozens or hundreds of links<\/span><\/li>\n
- Related pages can be grouped together<\/span><\/li>\n
- Design is less cluttered when dropdowns and flyouts are retracted<\/span><\/li>\n<\/ul>\n
Cons<\/span><\/h4>\n\n- Flyouts are difficult to do well and can create terrible user experience<\/span><\/li>\n
- Too many links can overwhelm users and dilute link authority<\/span><\/li>\n
- Crawlers may have trouble finding links in dropdowns and flyouts<\/span><\/li>\n
- Hover doesn’t work for touchscreen users<\/span><\/li>\n<\/ul>\n
A Footnote About Footer Menus<\/span><\/h3>\nIf you’ve been reading this post thinking “But wait!” (index finger in the air), “I’ll put those extra links in the footer.”<\/span><\/p>\nNo, you can’t just stuff links to the other 100 pages you want to link to on every page of your site in the footer.<\/em> There’s plenty of evidence that Google devalues links in the footer, and your users aren’t going to be looking there unless they’re weirdos who like reading privacy policies. A footer menu (if you choose to use one at all) is where you can link to less important pages or provide easier-to-read links to pages you’ve linked to in your main navigation.<\/span><\/p>\nThe Best Global Site Navigation Design is Whatever’s Best for User Experience<\/span><\/h2>\nMaybe I’m erring on the side of oversimplification, but these days the tenet “what’s good for UX is good for SEO” can be applied to a lot of “what’s best” questions. Not to mention it prevents me from having to give a Holy-Grail answer. <\/span><\/p>\nBottom line: craft a great user experience that doesn’t ignore the many technical considerations which can torpedo your SEO. Your visitors, both human and machine, will thank you. <\/span><\/p>\nAnd since it’s 2018, I’m all-but contractually obligated to provide a TL;DR.<\/span><\/p>\n\n- If you have a tight handful of important site destinations, use <\/span>single-bar navigation.<\/b><\/li>\n
- If you need more room for links than a single bar and don’t need to group pages in multiple categories, use <\/span>double-bar navigation<\/b>.<\/span><\/li>\n
- If you need far more room for links, use <\/span>dropdown navigation.*<\/b><\/li>\n
- If you need room for dozens of links with nested categories (usually an e-commerce site), use <\/span>dropdown navigation with flyouts<\/b>