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="no-underline text-black-500 hover:text-black dark:hover:text-white dark:text-black-400"
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="no-underline text-black-500 hover:text-black dark:hover:text-white dark:text-black-400"
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="no-underline text-black-500 hover:text-black dark:hover:text-white dark:text-black-400"
href="#">
Description
</a>
</li>
<li class="flex items-center gap-8px whitespace-nowrap text-p2 text-black dark:text-white hover:text-black-700 dark:hover:text-black-200 font-bold cursor-default">
<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>
Description
</li>
</ul>
</nav>
Usage
Just copy-paste the HTML or Figma code into your project.