Skip to main content
🏠ComponentsBreadcrumbVersion: 2.0.0-beta.6

Breadcrumb

Breadcrumbs are a navigation component that requires a container with .qtm-breadcrumb class and a list of items with .qtm-breadcrumb-item class.

Sizes

You can choose between 3 additional sizes with following classes: .qtm-small, .qtm-medium and .qtm-large. By default, breadcrumbs have medium size.

<ul class="qtm-breadcrumb qtm-small">
<li class="qtm-breadcrumb-item" tabindex="1">
<a href="#">
<span>Home</span>
</a>
</li>
<li class="qtm-breadcrumb-item" tabindex="1">
<a href="#">
<span>Component</span>
</a>
</li>
<li class="qtm-breadcrumb-item" tabindex="1">
<a href="#">
<span>Navigation</span>
</a>
</li>
<li class="qtm-breadcrumb-item" tabindex="1">
<a href="#">
<span>Breadcrumb</span>
</a>
</li>
</ul>
<ul class="qtm-breadcrumb qtm-medium">
<li class="qtm-breadcrumb-item" tabindex="1">
<a href="#">
<span>Home</span>
</a>
</li>
<li class="qtm-breadcrumb-item" tabindex="1">
<a href="#">
<span>Component</span>
</a>
</li>
<li class="qtm-breadcrumb-item" tabindex="1">
<a href="#">
<span>Navigation</span>
</a>
</li>
<li class="qtm-breadcrumb-item" tabindex="1">
<a href="#">
<span>Breadcrumb</span>
</a>
</li>
</ul>
<ul class="qtm-breadcrumb qtm-large">
<li class="qtm-breadcrumb-item" tabindex="1">
<a href="#">
<span>Home</span>
</a>
</li>
<li class="qtm-breadcrumb-item" tabindex="1">
<a href="#">
<span>Component</span>
</a>
</li>
<li class="qtm-breadcrumb-item" tabindex="1">
<a href="#">
<span>Navigation</span>
</a>
</li>
<li class="qtm-breadcrumb-item" tabindex="1">
<a href="#">
<span>Breadcrumb</span>
</a>
</li>
</ul>

Color

By default, breadcrumbs are not emphasized (primary theme). The neutral theme is more appropriate when you need to deprioritize its focus on the screen.

<ul class="qtm-breadcrumb qtm-neutral">
...
</ul>

Separator Option

The breadcrumbs have 2 options of separators which are “/” and “>”. By default, breadcrumbs have / separator. You can add .qtm-separator-chevron class if you want to use > separator that is icon of material design.

<ul class="qtm-breadcrumb qtm-separator-chevron">
...
</ul>

Icon

You can use any of the Material Icons.

<ul class="qtm-breadcrumb qtm-small">
<a href="#">
<i class="qtm-icon material-icons">home</i>
<span>Home</span>
</a>
...
</ul>
...