A single item within a breadcrumb navigation trail.
Element
igc-breadcrumb
Slots
default — The main content of the breadcrumb, typically an anchor (`<a>`) element.
prefix — Renders content before the main breadcrumb content.
suffix — Renders content after the main breadcrumb content.
separator — Overrides the default separator icon rendered after the breadcrumb item. The separator is hidden from assistive technology.
CSS Parts
label — The container wrapping the prefix, default, and suffix slots.
separator — The container wrapping the separator slot content.

Example

<igc-breadcrumbs>
  <igc-breadcrumb>
    <a href="/home">Home</a>
  </igc-breadcrumb>
  <igc-breadcrumb>
    <a href="/products">Products</a>
  </igc-breadcrumb>
  <igc-breadcrumb current>
    <a href="/products/laptop">Laptop</a>
  </igc-breadcrumb>
</igc-breadcrumbs>

Properties

Section titled "Properties"

current

Section titled "current"

Marks this breadcrumb as representing the current page. Sets aria-current="page" on the element when active.

 
current: boolean = false

Defined in src/components/breadcrumb/breadcrumb.ts:103

disabled

Section titled "disabled"

Sets the disabled state of the breadcrumb. Sets aria-disabled="true" on the element and removes the slotted content from the tab sequence while active.

 
disabled: boolean = false

Defined in src/components/breadcrumb/breadcrumb.ts:114

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/breadcrumb.ts:56