Components
Breadcrumbs
Semantic navigation that shows the current page within a hierarchy.
Props
Native attributes and event handlers are forwarded to the root Nav component. Common transitions apply to that root.
Theme entries: breadcrumbs,breadcrumbsItem,breadcrumbsList,breadcrumbsSeparator.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Custom content; see the usage notes for its component-specific role. |
class | string | '' | Tailwind utilities merged after the component theme and variants. |
element | HTMLElement | null | $bindable(null) | Bindable reference to the composition root. |
inTransition | TransitionProps | undefined | Enter transition override. |
isVisible | boolean | $bindable(true) | Bindable visibility state. |
items | BreadcrumbItem[] | [] | See usage notes and the component API. |
outTransition | TransitionProps | undefined | Exit transition override. |
separator | Snippet | undefined | undefined | See usage notes and the component API. |
theme | Theme | globalTheme | Local Theme instance; defaults to the global theme. |
transition | TransitionProps | [noopTransition, {}] | Shared transition function and options. |
variants | string[] | [] | Ordered component theme variants or cross-component references. |
Default usage
Import Breadcrumbs from sveltewind/components. This example shows its default styling in a usable context.
Loading...The last item is the current page and is rendered as text. Earlier items with href are links.
Examples
Theme variants
Every variant available for Breadcrumbs in the built-in themes is shown below.
compact — Apply the compact variant.
Loading...spacious — Apply the spacious variant.
Loading...soft — Apply the soft variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Loading...Props and behavior
Change aria-label while retaining the default component styling.
Loading...Content and values
Provide different items values.
Loading...