Skip to main content
🏠ComponentsBreadcrumbVersion: Next

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.

HomeMy cartCheckoutHomeMy cartCheckoutHomeMy cartCheckout
<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.

HomeMy cartCheckout
<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.

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

Icon​

You can use any of the Material Icons.

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