Breadcrumb

Breadcrumbs are a navigation component that helps users understand their current location within a website's hierarchy and navigate back to previous levels.

Sizes

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

<Breadcrumb size="small">
  <BreadcrumbItem>
    <a href="#">
      <span>Home</span>
    </a>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <a href="#">
      <span>My cart</span>
    </a>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <a href="#">
      <span>Checkout</span>
    </a>
  </BreadcrumbItem>
</Breadcrumb>

Color

By default, breadcrumbs use the primary color theme. The neutral theme is more appropriate when you need to deprioritize its focus on the screen. Set the color property to change color to neutral.

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

Separator Option

The breadcrumbs have 2 options of separators: "/" and ">". By default, breadcrumbs have / separators. You can set the separator property to > if you want to use the chevron separator.

<Breadcrumb separator=">"> ... </Breadcrumb>

Icon

You can use any of the Material Icons within your breadcrumb items.

<Breadcrumb size="small">
  <BreadcrumbItem>
    <a href="#">
      <Icon icon="home"></Icon>
      <span>Home</span>
    </a>
  </BreadcrumbItem>
  ...
</Breadcrumb>

Event handling

You can handle navigation events by adding click handlers to the links inside your breadcrumb items.

const handleHomeClick = (e) => {
  e.preventDefault();
  console.log('Home clicked');
  // Add your navigation logic here
};

const handleProductsClick = (e) => {
  e.preventDefault();
  console.log('Products clicked');
  // Add your navigation logic here
};

const handleDetailsClick = (e) => {
  e.preventDefault();
  console.log('Details clicked');
  // Add your navigation logic here
};

<Breadcrumb>
  <BreadcrumbItem>
    <a href="#" onClick={handleHomeClick}>
      <span>Home</span>
    </a>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <a href="#" onClick={handleProductsClick}>
      <span>Products</span>
    </a>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <a href="#" onClick={handleDetailsClick}>
      <span>Details</span>
    </a>
  </BreadcrumbItem>
</Breadcrumb>

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

QtmBreadcrumbItem

Property	Type	Default	Description
classes	string