# 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](https://www.theui.dev/docs/types#breadcrumb-data-type)) 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: ```html ``` ## Change Link Separator You can customize the separator between breadcrumb links using the `separator` prop. The default separator is `/` and it can be overridden as shown below: ```html ``` ## 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. ```html ``` ## 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. ```html ``` 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 `