Breadcrumb
breadcrumbuiHierarchical wayfinding strip that shows a user’s position in a nested page tree. Built from `<BreadcrumbList>` and `<BreadcrumbItem>` primitives so you can drop in custom separators, dropdowns for collapsed parents, and ellipsis for overflow.
Installation
$pnpm dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/breadcrumb.json$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/breadcrumb.json$yarn dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/breadcrumb.json$bunx shadcn-svelte@latest add https://uipkge.dev/r/svelte/breadcrumb.jsonManifest:
https://uipkge.dev/r/svelte/breadcrumb.jsonInstalls to:src/lib/components/ui/breadcrumb/Examples
Loading interactive previews…
Loading interactive previews…
Props
| Name | Type / Values | Default | Required |
|---|---|---|---|
ref | HTMLElement | null | — | optional |
npm dependencies
Used by
Files installed (8)
src/lib/components/ui/breadcrumb/Breadcrumb.svelte0.5 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> { ref?: HTMLElement | null } </script> <script lang="ts"> let { class: className, children, ref = $bindable(null), ...restProps }: BreadcrumbProps = $props() </script> <nav bind:this={ref} aria-label="breadcrumb" data-uipkge data-slot="breadcrumb" class={className} {...restProps}> {@render children?.()} </nav>src/lib/components/ui/breadcrumb/BreadcrumbEllipsis.svelte0.7 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface BreadcrumbEllipsisProps extends HTMLAttributes<HTMLSpanElement> { ref?: HTMLSpanElement | null } </script> <script lang="ts"> import { MoreHorizontal } from '@lucide/svelte' import { cn } from '$lib/utils' let { class: className, children, ref = $bindable(null), ...restProps }: BreadcrumbEllipsisProps = $props() </script> <span bind:this={ref} data-uipkge data-slot="breadcrumb-ellipsis" class={cn('flex size-11 items-center justify-center', className)} {...restProps} > {#if children} {@render children()} {:else} <MoreHorizontal class="size-4" aria-hidden="true" /> {/if} <span class="sr-only">More</span> </span>src/lib/components/ui/breadcrumb/BreadcrumbItem.svelte0.5 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface BreadcrumbItemProps extends HTMLAttributes<HTMLLIElement> { ref?: HTMLLIElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, children, ref = $bindable(null), ...restProps }: BreadcrumbItemProps = $props() </script> <li bind:this={ref} data-uipkge data-slot="breadcrumb-item" class={cn('inline-flex items-center gap-1.5', className)} {...restProps} > {@render children?.()} </li>src/lib/components/ui/breadcrumb/BreadcrumbLink.svelte1.2 kB
<script lang="ts" module> import type { Snippet } from 'svelte' import type { HTMLAnchorAttributes } from 'svelte/elements' export interface BreadcrumbLinkProps extends HTMLAnchorAttributes { /** Render your own element with the link's props and styles instead of * emitting an <a> — the Svelte counterpart of React's `asChild`. */ child?: Snippet<[{ props: Record<string, unknown> }]> /** The rendered <a>, via `bind:ref`. Stays null in `child` mode. */ ref?: HTMLAnchorElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, child, children, ref = $bindable(null), ...restProps }: BreadcrumbLinkProps = $props() const mergedProps = $derived({ 'data-uipkge': '', 'data-slot': 'breadcrumb-link', class: cn( 'hover:text-foreground focus-visible:outline-ring rounded-sm underline-offset-4 transition-colors duration-200 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2', className, ), ...restProps, }) </script> {#if child} {@render child({ props: mergedProps })} {:else} <a bind:this={ref} {...mergedProps}>{@render children?.()}</a> {/if}src/lib/components/ui/breadcrumb/BreadcrumbList.svelte0.6 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface BreadcrumbListProps extends HTMLAttributes<HTMLOListElement> { ref?: HTMLOListElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, children, ref = $bindable(null), ...restProps }: BreadcrumbListProps = $props() </script> <ol bind:this={ref} data-uipkge data-slot="breadcrumb-list" class={cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', className)} {...restProps} > {@render children?.()} </ol>src/lib/components/ui/breadcrumb/BreadcrumbPage.svelte0.6 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface BreadcrumbPageProps extends HTMLAttributes<HTMLSpanElement> { ref?: HTMLSpanElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, children, ref = $bindable(null), ...restProps }: BreadcrumbPageProps = $props() </script> <span bind:this={ref} data-uipkge data-slot="breadcrumb-page" aria-current="page" class={cn('text-foreground cursor-default font-normal', className)} {...restProps} > {@render children?.()} </span>src/lib/components/ui/breadcrumb/BreadcrumbSeparator.svelte0.7 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface BreadcrumbSeparatorProps extends HTMLAttributes<HTMLLIElement> { ref?: HTMLLIElement | null } </script> <script lang="ts"> import { ChevronRight } from '@lucide/svelte' import { cn } from '$lib/utils' let { class: className, children, ref = $bindable(null), ...restProps }: BreadcrumbSeparatorProps = $props() </script> <li bind:this={ref} data-uipkge data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class={cn('[&>svg]:size-3.5', className)} {...restProps} > {#if children} {@render children()} {:else} <ChevronRight /> {/if} </li>src/lib/components/ui/breadcrumb/index.ts0.7 kB
export { default as Breadcrumb, type BreadcrumbProps } from './Breadcrumb.svelte' export { default as BreadcrumbEllipsis, type BreadcrumbEllipsisProps } from './BreadcrumbEllipsis.svelte' export { default as BreadcrumbItem, type BreadcrumbItemProps } from './BreadcrumbItem.svelte' export { default as BreadcrumbLink, type BreadcrumbLinkProps } from './BreadcrumbLink.svelte' export { default as BreadcrumbList, type BreadcrumbListProps } from './BreadcrumbList.svelte' export { default as BreadcrumbPage, type BreadcrumbPageProps } from './BreadcrumbPage.svelte' export { default as BreadcrumbSeparator, type BreadcrumbSeparatorProps } from './BreadcrumbSeparator.svelte'
Raw manifest:https://uipkge.dev/r/svelte/breadcrumb.json