Component

Breadcrumbs

Breadcrumbs show users where they are in a site's hierarchy and help with navigation. They are responsive, customizable, and support multiple separators.

<ol class="quanta-breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li aria-current="page">Data</li>
</ol>

Separator Variants

Change the breadcrumb separator using class variants:

<ol class="quanta-breadcrumb separator-dot">...</ol>
<ol class="quanta-breadcrumb separator-arrow">...</ol>
<ol class="quanta-breadcrumb separator-pipe">...</ol>

Sizes

Available in small, medium, and large sizes:

<ol class="quanta-breadcrumb quanta-breadcrumb-sm">...</ol>
<ol class="quanta-breadcrumb quanta-breadcrumb-md">...</ol>
<ol class="quanta-breadcrumb quanta-breadcrumb-lg">...</ol>

With Icons

You can prepend icons to breadcrumb items:

<ol class="quanta-breadcrumb">
  <li><a href="#"><span class="icon-start">🏠</span>Home</a></li>
  <li><a href="#"><span class="icon-start">📁</span>Files</a></li>
  <li aria-current="page">Details</li>
</ol>