Breadcrumb

A navigation aid that shows the user's location within a website hierarchy and allows navigation to parent pages.

Anatomy 

<script>
  import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbCurrentLink,
  } from "@saas-ui/svelte/components/breadcrumb";
</script>

<Breadcrumb.Root>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/products">Products</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbCurrentLink>Current Page</BreadcrumbCurrentLink>
  </BreadcrumbItem>
</Breadcrumb.Root>

Examples

Basic Accessibility

Basic breadcrumb navigation with default styling.

Sizes Accessibility

Use the size prop to change the size of the breadcrumb. Available sizes: sm, md, lg.

Variants Accessibility

Use the variant prop to change the visual style. Available variants: plain, underline.

With Ellipsis Accessibility

Use ellipsis to collapse middle breadcrumb items when the path is too long.

With Icon Accessibility

Breadcrumb items with icons for enhanced visual navigation.

With Menu Accessibility

Breadcrumb with a dropdown menu for accessing collapsed navigation items.

With Separator Accessibility

Use the separator prop to customize the separator character between items.

Props

Breadcrumb.Root

The breadcrumb container.

Prop Type Default Description
children Snippet - The breadcrumb items.
size "sm" | "md" | "lg" "md" The size of the breadcrumb.
variant "plain" | "underline" "plain" The visual style of the breadcrumb links.
separator Component | string "/" The separator element between breadcrumb items. Can be a string or SVG component.
separatorGap string | number - The gap around separators (in spacing units).
ariaLabel string "Breadcrumb" Accessible label for the breadcrumb navigation.
class string - Additional CSS classes to apply.

Breadcrumb.Item

A single breadcrumb item.

Prop Type Default Description
children Snippet - The breadcrumb item content.
showSeparator boolean true Whether to show the separator after this item.
class string - Additional CSS classes to apply.

Breadcrumb.Link

A clickable breadcrumb link.

Prop Type Default Description
children Snippet - The link content.
showSeparator boolean true Whether to show the separator after this link.
as "a" | "button" "a" Render as a button instead of an anchor.
href string - The URL the link points to.
class string - Additional CSS classes to apply.

Breadcrumb.CurrentLink

The current page indicator in the breadcrumb (non-interactive).

Prop Type Default Description
children Snippet - The current page content.
class string - Additional CSS classes to apply.

Breadcrumb.Ellipsis

An ellipsis indicator used to collapse middle breadcrumb items.

Prop Type Default Description
showSeparator boolean true Whether to show the separator after the ellipsis.
class string - Additional CSS classes to apply.

Breadcrumb.Menu

A breadcrumb item that contains a dropdown menu for collapsed items.

Prop Type Default Description
children Snippet - The menu content (MenuRoot with MenuButton, MenuContent, etc.).
showSeparator boolean true Whether to show the separator after this menu.
class string - Additional CSS classes to apply.