Breadcrumb

The Breadcrumb component displays a navigation trail that helps users understand their location within a website or application. It provides context and allows for easy navigation to parent or ancestor pages.

Usage

<script>
  import { 
    Breadcrumb,
    BreadcrumbList,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbSeparator,
    BreadcrumbPage
  } from "$lib/components/ui/breadcrumb";
</script>

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Examples

API Reference

Breadcrumb Components

Component	Description
Breadcrumb	The root container for the breadcrumb navigation.
BreadcrumbList	The ordered list that contains the breadcrumb items.
BreadcrumbItem	A list item containing a breadcrumb link or current page.
BreadcrumbLink	A link to a parent or ancestor page in the navigation hierarchy.
BreadcrumbPage	The current page indicator (non-interactive).
BreadcrumbSeparator	The separator between breadcrumb items.
BreadcrumbEllipsis	An indicator for truncated breadcrumb items.

Breadcrumb Properties

Property	Type	Default	Description
class	string	undefined	Custom CSS classes.
ref	HTMLElement	undefined	A reference to the underlying HTML element.

BreadcrumbList Properties

Property	Type	Default	Description
class	string	undefined	Custom CSS classes.
ref	HTMLOlElement	undefined	A reference to the underlying HTML element.

BreadcrumbItem Properties

Property	Type	Default	Description
class	string	undefined	Custom CSS classes.
ref	HTMLLIElement	undefined	A reference to the underlying HTML element.

BreadcrumbLink Properties

Property	Type	Default	Description
href	string	undefined	The URL the link points to.
class	string	undefined	Custom CSS classes.
child	Snippet	undefined	Optional custom child component.
ref	HTMLAnchorElement	undefined	A reference to the underlying HTML element.

BreadcrumbPage Properties

Property	Type	Default	Description
class	string	undefined	Custom CSS classes.
ref	HTMLSpanElement	undefined	A reference to the underlying HTML element.

BreadcrumbSeparator Properties

Property	Type	Default	Description
class	string	undefined	Custom CSS classes.
ref	HTMLLIElement	undefined	A reference to the underlying HTML element.

BreadcrumbEllipsis Properties

Property	Type	Default	Description
class	string	undefined	Custom CSS classes.
ref	HTMLSpanElement	undefined	A reference to the underlying HTML element.

Implementation

The Breadcrumb component is implemented using semantic HTML elements for better accessibility. It uses the nav element with an aria-label="breadcrumb" for the container, an ordered list <ol> for the breadcrumb items, and appropriate ARIA attributes for the current page and separators:

<!-- Breadcrumb root component -->
<nav class={className} aria-label="breadcrumb">
  {@render children?.()}
</nav>

<!-- BreadcrumbList component -->
<ol class={cn(
  "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
  className
)}>
  {@render children?.()}
</ol>

<!-- BreadcrumbPage component (current page) -->
<span
  role="link"
  aria-disabled="true"
  aria-current="page"
  class={cn("text-foreground font-normal", className)}
>
  {@render children?.()}
</span>

<!-- BreadcrumbSeparator component -->
<li
  role="presentation"
  aria-hidden="true"
  class={cn("[&>svg]:size-3.5", className)}
>
  <!-- Default is ChevronRight icon -->
  <ChevronRight />
</li>

The default separator is a ChevronRight icon, but it can be customized by providing children to the BreadcrumbSeparator component. The component also supports an ellipsis indicator for long breadcrumb trails.