Breadcrumbs

Svelte Component

Displays the current navigation hierarchy.

@skeletonlabs/skeleton
Source Code
View Page Source
Accessibility Reference

Examples

Getting Started

html 
<Breadcrumb>
	<Crumb href='/'>
		<svelte:fragment slot="lead">(icon)</svelte:fragment>
		<span>(page)</span>
	</Crumb>
	<Crumb>(current)</Crumb>
</Breadcrumb>

Set the Seperator

Use the seperator prop to define a custom seperator character. Accepts any valid HTML value, including unicode and emojii.

html 
<Breadcrumb separator="&hearts;"></Breadcrumb>

Define Current Page

Crumbs without a href attribute are treated as the current page. This means they render as span and do not append a trailing separator.

html 
<Crumb>Current</Crumb>