Skip to main content

Breadcrumb Item

<gstock-breadcrumb-item> | GstockBreadcrumbItem

Use the href attribute to make the component render an <a> under the hood. This gives you all the default link behavior the browser provides and exposes the target and download attributes.

Link New Window Download Disabled
<gstock-breadcrumb-item prefix="link" href="https://example.com/">Link</gstock-breadcrumb-item>
<gstock-breadcrumb-item prefix="external-link" href="https://example.com/" target="_blank">New Window</gstock-breadcrumb-item>
<gstock-breadcrumb-item prefix="download" href="/assets/images/wordmark.svg" download="gstock.svg">Download</gstock-breadcrumb-item>
<gstock-breadcrumb-item prefix="x-circle" href="https://example.com/" disabled>Disabled</gstock-breadcrumb-item>

Prefix

Use the prefix attribute to add a icon before de content.

Breadcrumb Item
<gstock-breadcrumb-item prefix="home" href="https://example.com/">
 Breadcrumb Item
</gstock-breadcrumb-item>

Use the prefix slot to add a element before de content. This slot is adapted for use with <gstock-icon>.

Breadcrumb Item
<gstock-breadcrumb-item href="https://example.com/">
  <gstock-icon slot="prefix" name="home"></gstock-icon>
 Breadcrumb Item
</gstock-breadcrumb-item>

Suffix

Use the suffix attribute to add a icon after de content.

Breadcrumb Item
<gstock-breadcrumb-item suffix="home" href="https://example.com/">
  Breadcrumb Item
</gstock-breadcrumb-item>

Use the suffix slot to add a element after de content. This slot is adapted for use with <gstock-icon>.

Breadcrumb Item
<gstock-breadcrumb-item href="https://example.com/">
  Breadcrumb Item
  <gstock-icon slot="suffix" name="home"></gstock-icon>
</gstock-breadcrumb-item>

Separator

Use the separator slot to add a element after de content. This slot is adapted for use with <gstock-icon>.

basic w separator basic w separator
<gstock-breadcrumb-item href="https://example.com/">
  basic w separator
  <gstock-icon slot="separator" name="minus"></gstock-icon>
</gstock-breadcrumb-item>

<gstock-breadcrumb-item href="https://example.com/">
  basic w separator
  <gstock-icon slot="separator" name="minus"></gstock-icon>
</gstock-breadcrumb-item>