From 501417eda9006de9ea1931d7809aed33125fd90f Mon Sep 17 00:00:00 2001
From: Virtute90 <32056724+Virtute90@users.noreply.github.com>
Date: Mon, 15 Jul 2024 09:10:49 +0200
Subject: [PATCH] fix: thumbnav is a navigation component

---
 stories/Components/ThumbNav.stories.tsx    |    2 +-
 test/__snapshots__/Storybook.test.tsx.snap | 2322 ++++++++++----------
 2 files changed, 1162 insertions(+), 1162 deletions(-)

diff --git a/stories/Components/ThumbNav.stories.tsx b/stories/Components/ThumbNav.stories.tsx
index 1ec8f746c..831811386 100644
--- a/stories/Components/ThumbNav.stories.tsx
+++ b/stories/Components/ThumbNav.stories.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { ThumbNav, ThumbNavItem, ThumbNavProps } from '../../src';
 
 const meta: Meta<typeof ThumbNav> = {
-  title: "Documentazione/Componenti/ThumbNav",
+  title: "Documentazione/Menu di navigazione/ThumbNav",
   component: ThumbNav
 };
 
diff --git a/test/__snapshots__/Storybook.test.tsx.snap b/test/__snapshots__/Storybook.test.tsx.snap
index ba3f099eb..ae8fbd9dd 100644
--- a/test/__snapshots__/Storybook.test.tsx.snap
+++ b/test/__snapshots__/Storybook.test.tsx.snap
@@ -16059,1051 +16059,14 @@ exports[`Stories Snapshots Documentazione/Componenti/Tables TableThead 1`] = `
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav Esempio 1`] = `
-<div>
-  <ul
-    class="thumb-nav"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav EsempioAutoWidth 1`] = `
-<div>
-  <ul
-    class="thumb-nav thumb-nav-auto thumb-nav-auto-3"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 4"
-          src="https://picsum.photos/480/320?image=1040"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 5"
-          src="https://picsum.photos/480/320?image=1055"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 6"
-          src="https://picsum.photos/480/320?image=1057"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav EsempioAutoWidthFive 1`] = `
+exports[`Stories Snapshots Documentazione/Componenti/Timeline Esempi 1`] = `
 <div>
-  <ul
-    class="thumb-nav thumb-nav-auto thumb-nav-auto-5"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 4"
-          src="https://picsum.photos/480/320?image=1040"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 5"
-          src="https://picsum.photos/480/320?image=1055"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 6"
-          src="https://picsum.photos/480/320?image=1057"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav EsempioBlackLayer 1`] = `
-<div>
-  <ul
-    class="thumb-nav thumb-nav-black"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav EsempioFixed 1`] = `
-<div>
-  <ul
-    class="thumb-nav thumb-nav-fixed"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 4"
-          src="https://picsum.photos/480/320?image=1040"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 5"
-          src="https://picsum.photos/480/320?image=1055"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 6"
-          src="https://picsum.photos/480/320?image=1057"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav EsempioNoZoom 1`] = `
-<div>
-  <ul
-    class="thumb-nav thumb-nav-nozoom"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav EsempioPrimaryLayer 1`] = `
-<div>
-  <ul
-    class="thumb-nav thumb-nav-primary"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav EsempioSmall 1`] = `
-<div>
-  <ul
-    class="thumb-nav thumb-nav-small"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav EsempioVerticale 1`] = `
-<div>
-  <ul
-    class="thumb-nav thumb-nav-vertical"
-  >
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 1"
-          src="https://picsum.photos/480/320?image=1044"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 2"
-          src="https://picsum.photos/480/320?image=1050"
-        />
-      </a>
-    </li>
-    <li>
-      <img
-        alt=""
-        aria-hidden="true"
-        class="thumb-nav-resizer"
-        src="https://picsum.photos/240/160?image=1056"
-      />
-      <a
-        class="ratio ratio-3x2"
-        href="#"
-      >
-        <img
-          alt="Visualizza immagine 3"
-          src="https://picsum.photos/480/320?image=1037"
-        />
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav Overlay 1`] = `
-<div>
-  <div
-    class="position-relative"
-  >
-    <img
-      alt="Amazing landscape"
-      class="test-image"
-      src="https://picsum.photos/1280/720?image=1050"
-    />
-    <ul
-      class="thumb-nav thumb-nav-small thumb-nav-bottom"
-    >
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 1"
-            src="https://picsum.photos/480/320?image=1044"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="active ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 2"
-            src="https://picsum.photos/480/320?image=1050"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 3"
-            src="https://picsum.photos/480/320?image=1037"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 4"
-            src="https://picsum.photos/480/320?image=1040"
-          />
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav OverlayLeft 1`] = `
-<div>
-  <div
-    class="position-relative"
-  >
-    <img
-      alt="Amazing landscape"
-      class="test-image"
-      src="https://picsum.photos/1280/720?image=1050"
-    />
-    <ul
-      class="thumb-nav thumb-nav-small thumb-nav-vertical thumb-nav-left"
-    >
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 1"
-            src="https://picsum.photos/480/320?image=1044"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="active ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 2"
-            src="https://picsum.photos/480/320?image=1050"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 3"
-            src="https://picsum.photos/480/320?image=1037"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 4"
-            src="https://picsum.photos/480/320?image=1040"
-          />
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav OverlayRight 1`] = `
-<div>
-  <div
-    class="position-relative"
-  >
-    <img
-      alt="Amazing landscape"
-      class="test-image"
-      src="https://picsum.photos/1280/720?image=1050"
-    />
-    <ul
-      class="thumb-nav thumb-nav-small thumb-nav-vertical thumb-nav-right"
-    >
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 1"
-            src="https://picsum.photos/480/320?image=1044"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="active ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 2"
-            src="https://picsum.photos/480/320?image=1050"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 3"
-            src="https://picsum.photos/480/320?image=1037"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 4"
-            src="https://picsum.photos/480/320?image=1040"
-          />
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/ThumbNav OverlayTop 1`] = `
-<div>
-  <div
-    class="position-relative"
-  >
-    <img
-      alt="Amazing landscape"
-      class="test-image"
-      src="https://picsum.photos/1280/720?image=1050"
-    />
-    <ul
-      class="thumb-nav thumb-nav-small thumb-nav-top"
-    >
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 1"
-            src="https://picsum.photos/480/320?image=1044"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="active ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 2"
-            src="https://picsum.photos/480/320?image=1050"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 3"
-            src="https://picsum.photos/480/320?image=1037"
-          />
-        </a>
-      </li>
-      <li>
-        <img
-          alt=""
-          aria-hidden="true"
-          class="thumb-nav-resizer"
-          src="https://picsum.photos/240/160?image=1056"
-        />
-        <a
-          class="ratio ratio-3x2"
-          href="#"
-        >
-          <img
-            alt="Visualizza immagine 4"
-            src="https://picsum.photos/480/320?image=1040"
-          />
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/Timeline Esempi 1`] = `
-<div>
-  <div>
-    <div
-      class="it-timeline-wrapper"
-    >
-      <div
-        class="row"
+  <div>
+    <div
+      class="it-timeline-wrapper"
+    >
+      <div
+        class="row"
       >
         <div
           class="col-12"
@@ -32471,137 +31434,1174 @@ exports[`Stories Snapshots Documentazione/Menu di navigazione/Navscroll Posizion
       <div
         class="it-page-sections-container col-12 col-lg-8"
       >
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec congue eros. Maecenas sagittis commodo libero nec porta. Nunc semper velit venenatis ligula condimentum ultricies. In hac habitasse platea dictumst. In malesuada pharetra nulla, id aliquam metus egestas ut. Nulla sollicitudin cursus felis, eu sagittis ante porta id. Suspendisse pellentesque ex non sem tincidunt, aliquam rhoncus turpis maximus. Vivamus eget massa turpis. Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer feugiat et massa nec rhoncus. Morbi vitae metus et sapien suscipit mattis vitae ac ex. Proin pharetra, sem vitae varius malesuada, risus tortor sodales arcu, eu aliquam lorem libero vel urna. Aliquam massa lacus, faucibus quis urna ac, pharetra pretium ex. In facilisis urna non urna luctus, a bibendum tortor facilisis. Mauris sed risus justo. In et erat fermentum eros hendrerit tempor. Quisque accumsan magna ac risus ultricies, vel condimentum ipsum accumsan. Proin blandit mauris sed sodales sollicitudin.
-        </p>
-        <h2
-          class="it-page-section"
-          id="1"
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec congue eros. Maecenas sagittis commodo libero nec porta. Nunc semper velit venenatis ligula condimentum ultricies. In hac habitasse platea dictumst. In malesuada pharetra nulla, id aliquam metus egestas ut. Nulla sollicitudin cursus felis, eu sagittis ante porta id. Suspendisse pellentesque ex non sem tincidunt, aliquam rhoncus turpis maximus. Vivamus eget massa turpis. Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer feugiat et massa nec rhoncus. Morbi vitae metus et sapien suscipit mattis vitae ac ex. Proin pharetra, sem vitae varius malesuada, risus tortor sodales arcu, eu aliquam lorem libero vel urna. Aliquam massa lacus, faucibus quis urna ac, pharetra pretium ex. In facilisis urna non urna luctus, a bibendum tortor facilisis. Mauris sed risus justo. In et erat fermentum eros hendrerit tempor. Quisque accumsan magna ac risus ultricies, vel condimentum ipsum accumsan. Proin blandit mauris sed sodales sollicitudin.
+        </p>
+        <h2
+          class="it-page-section"
+          id="1"
+        >
+          Introduzione
+        </h2>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h3
+          class="it-page-section"
+          id="1_1"
+        >
+          Nested item 1.1
+        </h3>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h4
+          class="it-page-section"
+          id="1_1_1"
+        >
+          Nested item 1.1.1
+        </h4>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h4
+          class="it-page-section"
+          id="1_1_2"
+        >
+          Nested item 1.1.2
+        </h4>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h4
+          class="it-page-section"
+          id="1_1_3"
+        >
+          Nested item 1.1.3
+        </h4>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h3
+          class="it-page-section"
+          id="1_2"
+        >
+          Nested item 1.2
+        </h3>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h3
+          class="it-page-section"
+          id="1_3"
+        >
+          Nested item 1.3
+        </h3>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h2
+          class="it-page-section"
+          id="2"
+        >
+          Introduzione 2
+        </h2>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h3
+          class="it-page-section"
+          id="2_1"
+        >
+          Nested item 2.1
+        </h3>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h4
+          class="it-page-section"
+          id="2_1_1"
+        >
+          Nested item 2.1.1
+        </h4>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h4
+          class="it-page-section"
+          id="2_1_2"
+        >
+          Nested item 2.1.2
+        </h4>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h4
+          class="it-page-section"
+          id="2_1_3"
+        >
+          Nested item 2.1.3
+        </h4>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h3
+          class="it-page-section"
+          id="2_2"
+        >
+          Nested item 2.2
+        </h3>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+        <h3
+          class="it-page-section"
+          id="2_3"
+        >
+          Nested item 2.3
+        </h3>
+        <p>
+          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav Esempio 1`] = `
+<div>
+  <ul
+    class="thumb-nav"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav EsempioAutoWidth 1`] = `
+<div>
+  <ul
+    class="thumb-nav thumb-nav-auto thumb-nav-auto-3"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 4"
+          src="https://picsum.photos/480/320?image=1040"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 5"
+          src="https://picsum.photos/480/320?image=1055"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 6"
+          src="https://picsum.photos/480/320?image=1057"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav EsempioAutoWidthFive 1`] = `
+<div>
+  <ul
+    class="thumb-nav thumb-nav-auto thumb-nav-auto-5"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 4"
+          src="https://picsum.photos/480/320?image=1040"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 5"
+          src="https://picsum.photos/480/320?image=1055"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 6"
+          src="https://picsum.photos/480/320?image=1057"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav EsempioBlackLayer 1`] = `
+<div>
+  <ul
+    class="thumb-nav thumb-nav-black"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav EsempioFixed 1`] = `
+<div>
+  <ul
+    class="thumb-nav thumb-nav-fixed"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 4"
+          src="https://picsum.photos/480/320?image=1040"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 5"
+          src="https://picsum.photos/480/320?image=1055"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 6"
+          src="https://picsum.photos/480/320?image=1057"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav EsempioNoZoom 1`] = `
+<div>
+  <ul
+    class="thumb-nav thumb-nav-nozoom"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav EsempioPrimaryLayer 1`] = `
+<div>
+  <ul
+    class="thumb-nav thumb-nav-primary"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav EsempioSmall 1`] = `
+<div>
+  <ul
+    class="thumb-nav thumb-nav-small"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav EsempioVerticale 1`] = `
+<div>
+  <ul
+    class="thumb-nav thumb-nav-vertical"
+  >
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 1"
+          src="https://picsum.photos/480/320?image=1044"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 2"
+          src="https://picsum.photos/480/320?image=1050"
+        />
+      </a>
+    </li>
+    <li>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="thumb-nav-resizer"
+        src="https://picsum.photos/240/160?image=1056"
+      />
+      <a
+        class="ratio ratio-3x2"
+        href="#"
+      >
+        <img
+          alt="Visualizza immagine 3"
+          src="https://picsum.photos/480/320?image=1037"
+        />
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav Overlay 1`] = `
+<div>
+  <div
+    class="position-relative"
+  >
+    <img
+      alt="Amazing landscape"
+      class="test-image"
+      src="https://picsum.photos/1280/720?image=1050"
+    />
+    <ul
+      class="thumb-nav thumb-nav-small thumb-nav-bottom"
+    >
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Introduzione
-        </h2>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue, sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h3
-          class="it-page-section"
-          id="1_1"
+          <img
+            alt="Visualizza immagine 1"
+            src="https://picsum.photos/480/320?image=1044"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="active ratio ratio-3x2"
+          href="#"
         >
-          Nested item 1.1
-        </h3>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h4
-          class="it-page-section"
-          id="1_1_1"
+          <img
+            alt="Visualizza immagine 2"
+            src="https://picsum.photos/480/320?image=1050"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 1.1.1
-        </h4>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h4
-          class="it-page-section"
-          id="1_1_2"
+          <img
+            alt="Visualizza immagine 3"
+            src="https://picsum.photos/480/320?image=1037"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 1.1.2
-        </h4>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h4
-          class="it-page-section"
-          id="1_1_3"
+          <img
+            alt="Visualizza immagine 4"
+            src="https://picsum.photos/480/320?image=1040"
+          />
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav OverlayLeft 1`] = `
+<div>
+  <div
+    class="position-relative"
+  >
+    <img
+      alt="Amazing landscape"
+      class="test-image"
+      src="https://picsum.photos/1280/720?image=1050"
+    />
+    <ul
+      class="thumb-nav thumb-nav-small thumb-nav-vertical thumb-nav-left"
+    >
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 1.1.3
-        </h4>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h3
-          class="it-page-section"
-          id="1_2"
+          <img
+            alt="Visualizza immagine 1"
+            src="https://picsum.photos/480/320?image=1044"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="active ratio ratio-3x2"
+          href="#"
+        >
+          <img
+            alt="Visualizza immagine 2"
+            src="https://picsum.photos/480/320?image=1050"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
+        >
+          <img
+            alt="Visualizza immagine 3"
+            src="https://picsum.photos/480/320?image=1037"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 1.2
-        </h3>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h3
-          class="it-page-section"
-          id="1_3"
+          <img
+            alt="Visualizza immagine 4"
+            src="https://picsum.photos/480/320?image=1040"
+          />
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav OverlayRight 1`] = `
+<div>
+  <div
+    class="position-relative"
+  >
+    <img
+      alt="Amazing landscape"
+      class="test-image"
+      src="https://picsum.photos/1280/720?image=1050"
+    />
+    <ul
+      class="thumb-nav thumb-nav-small thumb-nav-vertical thumb-nav-right"
+    >
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 1.3
-        </h3>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h2
-          class="it-page-section"
-          id="2"
+          <img
+            alt="Visualizza immagine 1"
+            src="https://picsum.photos/480/320?image=1044"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="active ratio ratio-3x2"
+          href="#"
         >
-          Introduzione 2
-        </h2>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h3
-          class="it-page-section"
-          id="2_1"
+          <img
+            alt="Visualizza immagine 2"
+            src="https://picsum.photos/480/320?image=1050"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 2.1
-        </h3>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h4
-          class="it-page-section"
-          id="2_1_1"
+          <img
+            alt="Visualizza immagine 3"
+            src="https://picsum.photos/480/320?image=1037"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 2.1.1
-        </h4>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h4
-          class="it-page-section"
-          id="2_1_2"
+          <img
+            alt="Visualizza immagine 4"
+            src="https://picsum.photos/480/320?image=1040"
+          />
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Menu di navigazione/ThumbNav OverlayTop 1`] = `
+<div>
+  <div
+    class="position-relative"
+  >
+    <img
+      alt="Amazing landscape"
+      class="test-image"
+      src="https://picsum.photos/1280/720?image=1050"
+    />
+    <ul
+      class="thumb-nav thumb-nav-small thumb-nav-top"
+    >
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 2.1.2
-        </h4>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h4
-          class="it-page-section"
-          id="2_1_3"
+          <img
+            alt="Visualizza immagine 1"
+            src="https://picsum.photos/480/320?image=1044"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="active ratio ratio-3x2"
+          href="#"
         >
-          Nested item 2.1.3
-        </h4>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h3
-          class="it-page-section"
-          id="2_2"
+          <img
+            alt="Visualizza immagine 2"
+            src="https://picsum.photos/480/320?image=1050"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 2.2
-        </h3>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-        <h3
-          class="it-page-section"
-          id="2_3"
+          <img
+            alt="Visualizza immagine 3"
+            src="https://picsum.photos/480/320?image=1037"
+          />
+        </a>
+      </li>
+      <li>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="thumb-nav-resizer"
+          src="https://picsum.photos/240/160?image=1056"
+        />
+        <a
+          class="ratio ratio-3x2"
+          href="#"
         >
-          Nested item 2.3
-        </h3>
-        <p>
-          Proin placerat ipsum massa, ac commodo velit tempor quis. In ante augue,sodales ac rhoncus in, ultricies a neque. Morbi non semper felis, at lacinia nibh. Nam quis elit massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam laoreet, diam quis blandit porttitor, leo erat semper sem, vel sagittis dolor quam eu magna. Nunc feugiat pretium tempor. Nam eget augue quis tellus viverra malesuada vel ut quam. Cras vehicula rutrum vehicula. Suspendisse efficitur eget purus vitae convallis. Integer euismod pharetra lorem, non ullamcorper lorem euismod vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-        </p>
-      </div>
-    </div>
+          <img
+            alt="Visualizza immagine 4"
+            src="https://picsum.photos/480/320?image=1040"
+          />
+        </a>
+      </li>
+    </ul>
   </div>
 </div>
 `;