Tailwind CSS Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Breadcrumb

<nav aria-label="breadcrumb">
	<ol class="flex flex-wrap">
		<li class="inline-block text-green-600 mr-2">
			<a href="#!">
				Home
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="icon icon-tabler icon-tabler-chevron-right inline-block"
					width="14"
					height="14"
					viewBox="0 0 24 24"
					stroke-width="2"
					stroke="currentColor"
					fill="none"
					stroke-linecap="round"
					stroke-linejoin="round"
				>
					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
					<path d="M9 6l6 6l-6 6" />
				</svg>
			</a>
		</li>
		<li class="inline-block text-green-600 mr-2">
			<a href="#!">
				Pages
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="icon icon-tabler icon-tabler-chevron-right inline-block"
					width="14"
					height="14"
					viewBox="0 0 24 24"
					stroke-width="2"
					stroke="currentColor"
					fill="none"
					stroke-linecap="round"
					stroke-linejoin="round"
				>
					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
					<path d="M9 6l6 6l-6 6" />
				</svg>
			</a>
		</li>
		<li class="inline-block text-gray-500 active" aria-current="page">Sub Pages</li>
	</ol>
</nav>