Feat(web): Showcase noninteractive breadcrumbs item #DS-957

lmc-eu · Oct 10, 2023 · 8587f79 · 8587f79
1 parent f1a4424
commit 8587f79
Showing 1 changed file with 36 additions and 0 deletions.
diff --git a/packages/web/src/scss/components/Breadcrumbs/index.html b/packages/web/src/scss/components/Breadcrumbs/index.html
@@ -74,4 +74,40 @@ <h2 class="docs-Heading">Custom</h2>
   </nav>
 </section>
 
+
+<section class="docs-Section">
+  <h2 class="docs-Heading">Current page is not a link</h2>
+  <nav aria-label="Breadcrumb" class="Breadcrumbs">
+    <ol>
+      <li class="d-none d-tablet-flex">
+        <a href="#rootUrl" class="link-primary link-underlined">Root</a>
+        <svg class="Icon" width="24" height="24">
+          <use xlink:href="/icons/svg/sprite.svg#chevron-right" />
+        </svg>
+      </li>
+      <li class="d-none d-tablet-flex">
+        <a href="#categoryUrl" class="link-primary link-underlined">Category</a>
+        <svg class="Icon" width="24" height="24">
+          <use xlink:href="/icons/svg/sprite.svg#chevron-right" />
+        </svg>
+      </li>
+      <li class="d-tablet-none">
+        <svg class="Icon" width="24" height="24">
+          <use xlink:href="/icons/svg/sprite.svg#chevron-left" />
+        </svg>
+        <a href="#subcategoryUrl" class="link-primary link-underlined">Back</a>
+      </li>
+      <li class="d-none d-tablet-flex">
+        <a href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a>
+        <svg class="Icon" width="24" height="24">
+          <use xlink:href="/icons/svg/sprite.svg#chevron-right" />
+        </svg>
+      </li>
+      <li class="d-none d-tablet-flex">
+        Current page
+      </li>
+    </ol>
+  </nav>
+</section>
+
 {{/layout/plain }}