# Breadcrumb

> Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.

Source: https://bootstrap-svelte.vercel.app/components/breadcrumb — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

## Basic Example

Use a breadcrumb to indicate the hierarchical navigation structure for the current page. Breadcrumbs automatically add visual separators via CSS, with the active item (usually the current page) being visually distinct and non-linkable.

```html
<Breadcrumb.Root>
    <Breadcrumb.Item href="#!">Home</Breadcrumb.Item>
    <Breadcrumb.Item href="#!">Library</Breadcrumb.Item>
    <Breadcrumb.Item isActive={true}>Data</Breadcrumb.Item>
</Breadcrumb.Root>
```

## Custom Dividers

Breadcrumb dividers are created using CSS through the `::before` pseudo-element and `content` property. You can modify the divider by changing the `divider` prop, which sets the CSS custom property `--bs-breadcrumb-divider`. You can use a string character like `>` or even an SVG embedded as a data URI.

```html
<!-- Using character divider -->
<Breadcrumb.Root divider=">">
    <Breadcrumb.Item href="#!">Home</Breadcrumb.Item>
    <Breadcrumb.Item href="#!">Library</Breadcrumb.Item>
    <Breadcrumb.Item isActive={true}>Data</Breadcrumb.Item>
</Breadcrumb.Root>

<!-- Using SVG divider -->
<Breadcrumb.Root divider="url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E)">
    <Breadcrumb.Item href="#!">Home</Breadcrumb.Item>
    <Breadcrumb.Item href="#!">Library</Breadcrumb.Item>
    <Breadcrumb.Item isActive={true}>Data</Breadcrumb.Item>
</Breadcrumb.Root>
```

## No Divider

You can also remove the divider by setting `divider=""` (an empty string).

```html
<!-- No divider -->
<Breadcrumb.Root divider="">
    <Breadcrumb.Item href="#!">Home</Breadcrumb.Item>
    <Breadcrumb.Item href="#!">Library</Breadcrumb.Item>
    <Breadcrumb.Item isActive={true}>Data</Breadcrumb.Item>
</Breadcrumb.Root>
```

## Accessibility

Since breadcrumbs provide a navigation, it's good practice to add a meaningful label such as `ariaLabel="breadcrumb navigation"` to describe the type of navigation provided in the `<nav>` element. The Breadcrumb component automatically applies an `aria-current="page"` to the last item of the set to indicate that it represents the current page.

```html
<Breadcrumb.Root ariaLabel="breadcrumb navigation">
    <Breadcrumb.Item href="#!">Home</Breadcrumb.Item>
    <Breadcrumb.Item href="#!">Library</Breadcrumb.Item>
    <Breadcrumb.Item isActive={true}>Data</Breadcrumb.Item>
</Breadcrumb.Root>
```

## API Reference

### Breadcrumb.Root Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaLabel` | `string` | `'breadcrumb'` | ARIA label for the breadcrumb navigation. |
| `class` | `string` | `undefined` | Additional CSS classes to apply to the component. |
| `divider` | `string` | `undefined` | Custom divider to use between breadcrumb items. |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element. |
| `id` | `string` | `breadcrumb-{uid}` | Unique ID for the breadcrumb element. |

### Breadcrumb.Item Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | `undefined` | Additional CSS classes to apply to the component. |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element. |
| `href` | `string` | `'#!'` | URL for the breadcrumb item. |
| `id` | `string` | `breadcrumb-item-{uid}` | Unique ID for the breadcrumb item element. |
| `isActive` | `boolean` | `false` | Whether the breadcrumb item is active (current page). |

### CSS Classes

The component applies Bootstrap's breadcrumb classes based on the provided props:

- `breadcrumb` - Base class for the Breadcrumb component
- `breadcrumb-item` - Applied to Breadcrumb.Item components
- `active` - Applied to Breadcrumb.Item when isActive=true

### CSS Variables

The Breadcrumb component uses the following CSS variables:

- `--bs-breadcrumb-divider` - Controls the divider character or content. Default is `/`
- `--bs-breadcrumb-item-padding-x` - Controls the horizontal padding of breadcrumb items
- `--bs-breadcrumb-margin-bottom` - Controls the margin at the bottom of the breadcrumb