Are links in dropdown menus really crawled by Google?

Why is this specification about HTML at load important?

Google clearly distinguishes two types of links: those present in the source HTML from the first render, and those added afterwards by JavaScript. This distinction is significant.

When Googlebot downloads your page, it first retrieves the raw HTML. If your navigation links are already there, in standard <a href> tags simply hidden by CSS (display:none, visibility:hidden, or transformations), the crawler sees them immediately. No need to run JavaScript, no latency, no risk.

What’s the difference between a pure CSS menu and a JavaScript menu?

A pure CSS dropdown uses pseudo-classes like :hover or hidden checkboxes to show/hide submenus. All links are present in the initial DOM. Google crawls them effortlessly.

A JavaScript menu can operate in two ways. It either hides/shows elements already present in the HTML (same logic as CSS, no issue). Or, it dynamically loads links on click or hover via fetch() or XMLHttpRequest. In this latter case, these links do not exist at the time of the initial crawl.

Google can execute JavaScript and eventually discover these links, but with two major downsides: a processing delay (JavaScript rendering consumes crawl budget) and a risk of failure if the script crashes or if Googlebot does not wait long enough.

Does display:none still cause crawl issues?

No. This old SEO legend has been dead for a long time. Google crawls perfectly links hidden by CSS, whether they are display:none, visibility:hidden, or positioned off-screen.

The nuance concerns the SEO weight of anchors. A visible link in main content will have more value than a link hidden in a mega-menu with 200 other links. But regarding pure crawl, no distinction: if the link is in the HTML, it is followed.

• Links in the initial HTML are crawled immediately, even if hidden in CSS
• Links loaded after rendering (AJAX, fetch) depend on JavaScript rendering budget
• A menu with 300 links dilutes PageRank, even if all are crawled
• Server response time affects crawl more than the method of menu display
• Google follows links in dropdown menus just like those in footers or sidebars

Is this statement consistent with field observations?

Yes, and it’s actually one of the few claims from Google that perfectly aligns with what we observe in crawl. Log tests show that Googlebot follows links from mega-menus, hidden navigations, and CSS accordions without issues.

However, we regularly see sites where certain sections are never crawled because their links only appear after JavaScript interaction. Typically: a hamburger menu that loads its content via fetch() on first click. On desktop, Google does not click. The link remains invisible.

What traps remain despite this confirmation?

The first trap is confusing crawl and PageRank equity. Yes, Google crawls your dropdown menu with 500 links. But those 500 links share the page juice. If your homepage has a mega-menu with 12 categories, each expanding to 30 subcategories, you are massively diluting.

The second trap: modern JavaScript frameworks (React, Vue, Next.js in CSR mode) that build the DOM afterwards. If your navigation component is built client-side and the initial HTML contains only a <div id="root"></div>, your links are technically not "present in the HTML at load". Google will need to wait for the JavaScript rendering. [To be checked] on every technical audit: inspect the raw source HTML (Ctrl+U, not the inspector), not the post-render DOM.

The third trap: touch events. On mobile, some dropdown menus require a tap to open. If the child links are only injected on tap and Googlebot mobile does not simulate that tap, there’s a problem. Always verify that links exist in the HTML, not just that they display visually.

When is this rule not enough?

When you use ambiguous relative links in a menu loaded across multiple URLs. Example: a mega-menu with <a href="../products/"> that works from /category/ but fails from /category/sub-category/page.html. Google crawls the link, hits a 404, and that’s the end of the story.

Another case: dropdown menus relying on JavaScript anchors (<a href="#" onclick="...">) with no real href. Technically, there’s a link in the HTML, but it points to #. Google will not crawl anything. This error still lingers on corporate sites that confuse navigation and JS events.

How can I check if my dropdown menus are crawlable?

First step: disable JavaScript in your browser (Chrome DevTools > Settings > Debugger > Disable JavaScript). Reload the page. If your menu links do not appear at all, they are generated in JS after loading. That's a problem.

Second check: Ctrl+U to view the source HTML. Look for your navigation links. If they are there, hardcoded in <a href> tags, even wrapped in <div style="display:none">, you are good. If they do not appear, or only as an empty <div id="menu-container"></div>, they will only be crawled after JavaScript rendering.

Third check: Google Search Console, Coverage section. Check if important URLs (categories, product pages) are marked "Detected, currently not indexed". If these pages are only linked from your dropdown menu, and the menu loads its links in JS, this may be the cause. Compare with server logs: Does Googlebot visit these URLs? If not, the link is probably not crawled.

Should I prefer CSS or JavaScript for dropdown menus?

In 2025, pure CSS remains the safest choice for critical navigation. A menu managed with :hover, :focus, or even hidden checkboxes ensures that all links are in the initial DOM. Zero rendering latency, zero risk of JS failure.

If you must use JavaScript (for example, to manage complex mega-menus with lazy-loading images), ensure that the links themselves are in the HTML. Only the display behavior can be managed in JS. For instance, a script that adds/removes a .open class on an already present container is fine. A script that fetches links on hover is not.

For modern frameworks, enable Server-Side Rendering (SSR) or static generation (SSG). Next.js, Nuxt, and SvelteKit do this natively. Your menu will be rendered server-side, the links will be in the initial HTML, and Google will crawl normally.

What mistakes should be avoided at all costs?

Error #1: using <a href="#"> or <a href="javascript:void(0)"> for navigation elements. These links go nowhere. Google does not follow them. If you need a visual trigger without a destination, use a <button>, not an <a>.

Error #2: loading sub-navigation links only on click/hover via AJAX. On mobile, Googlebot does not click. On desktop, it may not wait for JavaScript rendering. These links may remain invisible. If you want to lazy-load resources (images, videos), that's fine. But navigation links must be present from the beginning.

Error #3: forgetting about alternative internal linking. Even if Google crawls your dropdown menu, if it’s the only source of links to certain deep categories, you're at risk. A technical issue (JS bug, CDN down) and these pages become orphaned. Add contextual links in content, an XML sitemap, a sitemap page.

• Check that navigation links are present in the source HTML (Ctrl+U), not just in the post-render DOM
• Disable JavaScript in the browser and ensure that links remain accessible
• Avoid <a href="#"> and <a href="javascript:..."> for real navigation
• Prefer pure CSS or SSR/SSG for dropdown menus
• Monitor crawl logs to ensure Googlebot accesses URLs linked from the menu
• Add redundant internal linking (contextual links, footer, sitemap) for critical pages