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. Each item's text must be unique, and the item without a url is treated as the current page. Here's a basic example:

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

  let breadcrumbData: Array<BREADCRUMB_DATA> = [
    { text: "Home", url: "/" },
    { text: "Docs", url: "/docs" },
    { text: "Breadcrumb" }
  ]
</script>

<Breadcrumb data={breadcrumbData} />

Rounded Corner

The rounded prop sets the border radius of the breadcrumb container and its items. Available values are "none", "sm", "md" (default), "lg", "xl", "2xl" and "full". The corners are visible when the breadcrumb has a background or border, for example added with the class attribute.

Svelte 
<Breadcrumb data={breadcrumbData} rounded="full" class="bg-gray-100 px-4 py-2" />

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" 
/>

Anything else you pass reaches the element itself, so an id, a title, a data-* attribute or an event handler all work the way they would on a <nav>.

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