A breadcrumb navigation component that renders an ordered list of breadcrumb items.
Element
igc-breadcrumbs
Slots
default — Default slot for the breadcrumb items.

Remarks

[object Object]

Example

<!-- Default separator (tree_expand icon) -->
<nav aria-label="Breadcrumb">
  <igc-breadcrumbs>
    <igc-breadcrumb>
      <a href="/home">Home</a>
    </igc-breadcrumb>
    <igc-breadcrumb>
      <a href="/category">Category</a>
    </igc-breadcrumb>
    <igc-breadcrumb current>
      <a href="/category/item">Item</a>
    </igc-breadcrumb>
  </igc-breadcrumbs>
</nav>

<!-- Custom separator icon -->
<igc-breadcrumbs separator="chevron_right">
  <igc-breadcrumb><a href="/home">Home</a></igc-breadcrumb>
  <igc-breadcrumb current><a href="/item">Item</a></igc-breadcrumb>
</igc-breadcrumbs>

Properties

Section titled "Properties"

separator

Section titled "separator"

The icon name used as the default separator between breadcrumb items. Can be overridden per-item using the separator slot on an individual breadcrumb item.

 
separator: string = 'tree_expand'

Defined in src/components/breadcrumb/breadcrumbs.ts:77

styles

Section titled "styles"

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

``

 
styles: CSSResult[]

Defined in src/components/breadcrumb/breadcrumbs.ts:51