# salla-breadcrumb (https://docs.salla.dev/twilight/react/web-components/salla-breadcrumb)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

A StencilJS component for rendering breadcrumb navigation.

q

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-breadcrumb>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

This component has a native React version. Use it instead of the raw tag:

```tsx
import { Breadcrumb } from '@salla.sa/twilight-theme-engine/common';
```

## Example [#example]

```tsx
import { Breadcrumb } from '@salla.sa/twilight-theme-engine/common';

export function Example() {
  return (
    <Breadcrumb />
  );
}
```

```html
<salla-breadcrumb></salla-breadcrumb>
```

```tsx
import { Breadcrumb } from '@salla.sa/twilight-theme-engine/common';

export function Example() {
  return (
    <>
      {/* Custom item and arrow markup; keep the s-breadcrumb-item class on the item */}
      <Breadcrumb>
        <li slot="item" className="s-breadcrumb-item"><a href="{url}">{'{'}title{'}'}</a></li>
        <i slot="icon" className="sicon-arrow-left"></i>
      </Breadcrumb>
    </>
  );
}
```

```html
<!-- Custom item and arrow markup; keep the s-breadcrumb-item class on the item -->
<salla-breadcrumb>
  <li slot="item" class="s-breadcrumb-item"><a href="{url}">{title}</a></li>
  <i slot="icon" class="sicon-arrow-left"></i>
</salla-breadcrumb>
```

## Slots [#slots]

| Slot   | Description                                                                                                                        |
| ------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| `icon` | Replaces the arrow icon shown between items.                                                                                       |
| `item` | Replaces the markup of each breadcrumb item. The text `{url}` and `{title}` inside it are replaced with the item's link and title. |