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.
<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.
<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 > separator that is icon of material design.
<qtm-breadcrumb separator=">"> ... </qtm-breadcrumb>
Icon
You can use any of the Material Icons.
<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
qtm-breadcrumb
| 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 |