# Breadcrumb Displays the path to the current resource using a hierarchy of links. ```svelte Home Documentation Themes GitHub Components Breadcrumb ``` ## Installation ```bash pnpm dlx shadcn-svelte@latest add breadcrumb ``` ```bash npx shadcn-svelte@latest add breadcrumb ``` ```bash bun x shadcn-svelte@latest add breadcrumb ``` ## Usage ```svelte Home Components Breadcrumb ``` ## Examples ### Custom separator Use a custom component in the `` of `` to create a custom separator. ```svelte Home Components Breadcrumb ``` *** ### Dropdown You can compose `` with a `` to create a dropdown in the breadcrumb. ```svelte Home Components Documentation Themes GitHub Breadcrumb ``` *** ### Collapsed We provide a `` component to show a collapsed state when the breadcrumb is too long. ```svelte Home Components Breadcrumb ``` *** ### Link component To use a custom link component from your routing library, you can use the `asChild` prop on ``. ```svelte Home Components Breadcrumb ``` *** ### Responsive Here's an example of a responsive breadcrumb that composes `` with ``, ``, and ``. It displays a dropdown on desktop and a drawer on mobile. ```svelte {items[0].label} {#if items.length > ITEMS_TO_DISPLAY} {#if isDesktop.current} {#each items.slice(1, -2) as item, i (i)} {item.label} {/each} {:else} Navigate to Select a page to navigate to.

{#each items.slice(1, -2) as item, i (i)} {item.label} {/each}

Close {/if} {/if} {#each items.slice(-ITEMS_TO_DISPLAY + 1) as item (item.label)} {#if item.href} {item.label} {:else} {item.label} {/if} {/each} ```