Heatmaps for dropdown menus, tabs and accordions

See clicks inside menus, tabs and accordions as visitors saw them, and read each version of a page on its own. New in Cuttl heatmaps since 14 October 2026.

What’s new

A heatmap for dynamic content shows clicks on parts of a page that are hidden until someone opens them, such as dropdown menus, tabs and accordions, and keeps each version of a changing page apart. Since 14 October 2026, Cuttl heatmaps do both. It is live now, on the free plan and the paid plan.

  • Page versions. Every pageview records which version of the page the visitor saw. A heatmap shows one version at a time, the current one by default, with past versions in a dropdown.
  • Navigate. Click a menu, tab or accordion on the heatmap itself and it opens as a real visitor saw it right after clicking, with the clicks on it. Click a link and the heatmap of that page opens, for the version that was live at the same time.
  • Hidden elements. The Top elements list ranks every clicked element, including ones inside closed menus, and marks the hidden ones.

Why it matters

A heatmap that shows only the page as it first loads leaves out some of the most useful clicks. Many tools capture one snapshot when the page loads, so a menu opened later does not appear, and neither do the clicks inside it. A visitor might click through four levels of navigation and the map would show a single click on the menu button.

Changing pages cause a second problem. If the pricing page was redesigned last Tuesday, a heatmap covering the last month mixes clicks on two different layouts. A hotspot can sit over a button that was not there when most of the clicks happened. Reading each version on its own removes that doubt.

The two fixes together change which questions a heatmap can answer. Which navigation items get used? Which tab on a product page do visitors open first? Did the new header change where people click? Those questions need the hidden states and the right version, and now the heatmap holds both.

How it works

Everything is rebuilt from session recordings, so the live site is never loaded and past versions stay explorable after the site changes. To try it, open Journey Insights, then Heatmaps, and pick a page.

  • Choose a version. When a page has more than one version, a version dropdown appears in the toolbar. The current version is the default.
  • Switch Navigate on. It is on by default. Click a menu, tab or accordion in the page, and Cuttl shows it as visitors saw it just after clicking, with the clicks on it.
  • Follow a link. Clicking a link in Navigate mode opens that page’s heatmap for the version that was live at the same time.
  • Leave Navigate. “Back to the normal view” in the bar above the page returns you to the usual heatmap.
  • Use the list. In the side panel, Top elements ranks up to 500 clicked elements. Switch from All to Hidden now, and click a hidden row to open the page as a visitor saw it just before clicking that element.

For background on the maps themselves, see the guides to click maps and scroll maps.

Who it’s for

The update matters most to people who read heatmaps on pages that change or hide content. Some examples by role:

  • UX and UI designers: open the main navigation in Navigate and see which submenu links get clicked, then decide which to promote and which to cut.
  • Product managers: check which tab on a feature page visitors open first, and whether anyone opens the others.
  • CRO and experimentation leads: compare the heatmap of the version before a change with the version after it, without clicks from both mixed together.
  • Ecommerce managers: see whether visitors use the size guide accordion or the delivery information tab on product pages.
  • Agencies: show a client the exact state of a menu that attracted clicks, with the page version it belongs to.

Examples by industry

The same view helps in different ways depending on how the site is built:

  • Online stores: a mega menu with 40 links is mostly hidden on load. The Hidden now filter ranks which of those links are clicked, so the menu can be trimmed on evidence.
  • SaaS: a pricing page with a monthly and yearly toggle and a feature comparison accordion. Navigate shows which sections visitors open before they click a plan.
  • Publishers and media: a page that rotates its layout or carousel often. Versions keep clicks on an old layout separate from the current one.
  • Lead generation and service businesses: a quote page with collapsible questions. See which questions people open, and where they stop.

How to start in Cuttl

In app.cuttl.io, go to Journey Insights, then Heatmaps, and open a page that has a menu, tabs or an accordion, such as the homepage. Click the menu inside the heatmap and look at the clicks that appear on it. The heatmaps section of the Journey Insights page describes the map types. If you changed the page recently, open the version dropdown and compare the current version with the one before.

A few limits to know. A state can only be shown if at least one recorded visitor opened it. Minor variants such as personalised text join the main version. Visits from before 14 October sit in a “Before versions were recorded” group that may mix versions. Menus that open only on hover open by hovering over the page, not through Navigate.

AI assistants connected through the Cuttl MCP server can read page insights for each version, but Navigate itself is a dashboard feature.

Common questions

Some do and some do not. Tools that take one snapshot at page load leave out menus opened later. In Cuttl, Navigate opens a menu as a visitor saw it and shows the clicks on it, as long as at least one recorded visitor opened it.

Open the heatmap and click the tab or accordion in Navigate mode, or open the Top elements list and pick a hidden element. The page opens in the state a visitor saw it just before clicking.

Cuttl records the version of the page for every pageview and shows one version per heatmap. Pick an earlier version from the dropdown to see clicks from before the change.

Not through Navigate. A menu that opens on hover is opened by hovering over the page, so the clicks inside it are read in the normal view.

Yes, page versions, Navigate and the hidden elements list are available on both the free plan and the paid plan.

More guides