Breadcrumb

Breadcrumbs are a navigation component that requires a QtmBreadcrumb container and a list of QtmBreadcrumbItem.

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

<QtmBreadcrumb size="small">
  <QtmBreadcrumbItem>
    <a href="#">
      <QtmTypography>Home</QtmTypography>
    </a>
  </QtmBreadcrumbItem>
  <QtmBreadcrumbItem>
    <a href="#">
      <QtmTypography>My cart</QtmTypography>
    </a>
  </QtmBreadcrumbItem>
  <QtmBreadcrumbItem>
    <a href="#">
      <QtmTypography>Checkout</QtmTypography>
    </a>
  </QtmBreadcrumbItem>
</QtmBreadcrumb>

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

<QtmBreadcrumb color="neutral"> ... </QtmBreadcrumb>

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 > separator that is icon of material design.

HomeMy cartCheckout

<QtmBreadcrumb separator=">"> ... </QtmBreadcrumb>

Icon

You can use any of the Material Icons.

HomeMy cartCheckoutHomeMy cartCheckoutHomeMy cartCheckout

<QtmBreadcrumb size="small">
  <QtmBreadcrumbItem>
    <a href="#">
      <QtmIcon icon="home"></QtmIcon>
      <QtmTypography>Home</QtmTypography>
    </a>
  </QtmBreadcrumbItem>
  ...
</QtmBreadcrumb>
...

API

QtmBreadcrumb

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
color	"neutral" | "primary"	'primary'	The breadcrumb color emphasis
separator	"/" | ">"	'/'	The breadcrumbs separator
size	"large" | "medium" | "small"	'medium'	The size of the breadcrumbs