Breadcrumb
Navigation showing hierarchical page position.
<nav class="flex flex-col">
<ul class="flex items-center text-p2 gap-8px">
<li class="flex items-center gap-8px whitespace-nowrap text-p2">
<a
class="text-accent-600 hover:text-accent-900 dark:text-accent-300 dark:hover:text-accent-100 no-underline"
href="#">
Description
</a>
</li>
<li class="flex items-center gap-8px whitespace-nowrap text-p2">
<svg
width="20"
height="20"
viewbox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<g>
<path
d="M7.5 15L12.5 10L7.5 5"
stroke="#989AA3"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</g>
</svg>
<a
class="text-accent-600 hover:text-accent-900 dark:text-accent-300 dark:hover:text-accent-100 no-underline"
href="#">
Description
</a>
</li>
<li class="flex items-center gap-8px whitespace-nowrap text-p2">
<svg
width="20"
height="20"
viewbox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<g>
<path
d="M7.5 15L12.5 10L7.5 5"
stroke="#989AA3"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</g>
</svg>
<a
class="text-accent-600 hover:text-accent-900 dark:text-accent-300 dark:hover:text-accent-100 no-underline"
href="#">
Description
</a>
</li>
<li class="flex items-center gap-8px whitespace-nowrap text-p2">
<svg
width="20"
height="20"
viewbox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<g>
<path
d="M7.5 15L12.5 10L7.5 5"
stroke="#989AA3"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</g>
</svg>
<p class="font-bold cursor-default text-accent-500 hover:text-accent-700 dark:text-accent-200 dark:hover:text-accent-50">
Description
</p>
</li>
</ul>
</nav>
Usage
Just copy-paste the HTML or Figma code into your project.