Breadcrumb

Ripple UI comes with a breadcrumb component that helps you to show the current page in a hierarchy.

​

Default

Simple example of a breadcrumb.

<div class="breadcrumbs text-sm">
	<ul>
		<li>
			<a>Home</a>
		</li>
		<li>
			<a>Library</a>
		</li>
		<li>Add Data</li>
	</ul>
</div>

​

With Icons

Breadcrumbs with icons.

<div class="breadcrumbs text-sm">
	<ul>
		<li>
			<a>
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="mr-2 h-4 w-4 stroke-current">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
				</svg>
				<p>Desktop</p>
			</a>
		</li>
		<li>
			<a>
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="mr-2 h-4 w-4 stroke-current">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
				</svg>
				<p>Documents</p>
			</a>
		</li>
		<li>Add Folder</li>
	</ul>
</div>

​

Overflow

Breadcrumbs with overflow.

<div class="breadcrumbs max-w-xs">
	<ul>
		<li>
			<a>Text 1</a>
		</li>
		<li>
			<a>Text 2</a>
		</li>
		<li>
			<a>Text 3</a>
		</li>
		<li>
			<a>Text 4</a>
		</li>
		<li>Text 5</li>
	</ul>
</div>

​

API