Breadcrumb

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

Sizes

You can choose between 3 additional sizes with the size property: small, medium and large. By default, breadcrumbs have medium size.

HomeMy cartCheckoutHomeMy cartCheckoutHomeMy cartCheckout

<qtm-breadcrumb size="small">
  <qtm-breadcrumb-item>
    <a href="#">
      <qtm-typography>Home</qtm-typography>
    </a>
  </qtm-breadcrumb-item>
  <qtm-breadcrumb-item>
    <a href="#">
      <qtm-typography>My cart</qtm-typography>
    </a>
  </qtm-breadcrumb-item>
  <qtm-breadcrumb-item>
    <a href="#">
      <qtm-typography>Checkout</qtm-typography>
    </a>
  </qtm-breadcrumb-item>
</qtm-breadcrumb>

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. Set property color to change color to primary or neutral.

HomeMy cartCheckout

<qtm-breadcrumb color="neutral"> ... </qtm-breadcrumb>

Separator Option

The breadcrumbs have 2 options of separators which are “/” and “>”. By default, breadcrumbs have / separators. You can set the separator property to > if you want to use the > separator from Material Icons.

HomeMy cartCheckout

<qtm-breadcrumb separator=">"> ... </qtm-breadcrumb>

Icon

You can use any of the Material Icons.

HomeMy cartCheckoutHomeMy cartCheckoutHomeMy cartCheckout

<qtm-breadcrumb size="small">
  <qtm-breadcrumb-item>
    <a href="#">
      <qtm-icon icon="home"></qtm-icon>
      <qtm-typography>Home</qtm-typography>
    </a>
  </qtm-breadcrumb-item>
  ...
</qtm-breadcrumb>
...

API

Breadcrumb

Loading API documentation...

BreadcrumbItem

Loading API documentation...