Breadcrumb

The Breadcrumb component displays the location of the current page within a navigational hierarchy. It helps users understand the structure of your site and navigate back to previous pages easily.

Example

Start by importing the Breadcrumb component into your Svelte file, then pass it an array of breadcrumb items (like BREADCRUMB_DATA) containing each item's text and URL. Here's a basic example:

Svelte 
<script>
  import { Breadcrumb } from "theui-svelte";

  let breadcrumbData: Array<BREADCRUMB_DATA> = [
    { text: "Home", url: "/" },
    { text: "About", url: "/about" },
    { text: "Company" }
  ]
</script>

<Breadcrumb data={breadcrumbData} />

Customization

The Breadcrumb component offers flexibility for styling, allowing you to easily adapt it to match your design requirements.

To customize the breadcrumb container itself, you can use the standard class attribute to apply custom styles. For further customization, there are two props designed to style the breadcrumb links:

  • linkClasses: This prop updates the appearance of the links within the breadcrumb.
  • activeLinkClasses: This prop specifically targets the active link, enabling you to style it differently from the rest of the links.
Svelte 
<Breadcrumb 
  data={breadcrumbData} 
  activeLinkClasses="text-pink-500" 
  linkClasses="text-green-500" 
/>

Accessibility

The Breadcrumb component is fully accessible, with aria-label="breadcrumb" applied to the navigation container to identify it as a breadcrumb trail for assistive technologies. Each link is keyboard-navigable, and the current page is marked with aria-current="page". You only need to provide meaningful link labels and ensure proper color contrast for readability.

Configuration