# Breadcrumb

Router-independent navigation trail with explicit current-page items and decorative separators.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: hugeicons-icon, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add breadcrumb
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Item

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| href | string \| undefined | - | No | No | Destination of the item. Omit it on the current page. |
| current | boolean \| undefined | false | No | No | Whether this item represents the current page. Router independent. |
| class | (string & (ClassValue \| null)) \| undefined | - | No | No | Classes added to the element. |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| class | (string & (ClassValue \| null)) \| undefined | - | No | No | Classes added to the element. |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Separator

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| class | string \| undefined | - | No | No | Classes added to the element. |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |



### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
import Root from './breadcrumb.svelte';
import Item from './breadcrumb-item.svelte';
import Separator from './breadcrumb-separator.svelte';

export type BreadcrumbProps = DefaultProps & HTMLAttributes<HTMLElement>;
export type BreadcrumbItemProps = {
    /** Destination of the item. Omit it on the current page. */
    href?: string;
    /** Whether this item represents the current page. Router independent. */
    current?: boolean;
} & DefaultProps &
    Omit<HTMLAnchorAttributes, 'aria-current'>;
export type BreadcrumbSeparatorProps = DefaultProps;

export { Item, Root, Separator };
~~~~

## Examples

### Separators

~~~~svelte
<script lang="ts">
    import * as Breadcrumb from '@mielui/svelte/components/breadcrumb';
</script>

<div class="flex flex-col items-center gap-6">
    <Breadcrumb.Root>
        <Breadcrumb.Item href="/">Projects</Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item current>Billing</Breadcrumb.Item>
    </Breadcrumb.Root>
    <Breadcrumb.Root>
        <Breadcrumb.Item href="/">Projects</Breadcrumb.Item>
        <Breadcrumb.Separator>/</Breadcrumb.Separator>
        <Breadcrumb.Item current>Billing</Breadcrumb.Item>
    </Breadcrumb.Root>
</div>
~~~~

### With Icon

~~~~svelte
<script lang="ts">
    import { Home01Icon as Home } from '@hugeicons/core-free-icons';
    import * as Breadcrumb from '@mielui/svelte/components/breadcrumb';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<Breadcrumb.Root>
    <Breadcrumb.Item href="/" aria-label="Home">
        <HugeiconsIcon icon={Home} size={13} />
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item href="/docs">Docs</Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item current>Components</Breadcrumb.Item>
</Breadcrumb.Root>
~~~~

For the rendered reference, visit [/docs/components/breadcrumb](/docs/components/breadcrumb).