logo-icon
Breadcrumbs
Default

svelte 
<script lang="ts">
	import { Breadcrumbs } from 'stwui';
   
   interface Crumb {
		icon?: MaterialIcon;
		label?: string;
		href: string;
	}

   const crumbs: Crumb[] = [
		{ icon: 'home', href: '/' },
		{ label: 'Projects', href: '/projecs' },
		{ label: 'Project Hero', href: '/projects/project-hero' }
	];
</script>

<Breadcrumbs>
	{#each crumbs as crumb}
		{#if crumb.icon && crumb.label}
			<Breadcrumbs.Crumb href={crumb.href}>
				<Breadcrumbs.Crumb.Icon slot="icon" icon={crumb.icon} />
				<Breadcrumbs.Crumb.Label slot="label">{crumb.label}</Breadcrumbs.Crumb.Label>
			</Breadcrumbs.Crumb>
		{:else if crumb.icon}
			<Breadcrumbs.Crumb href={crumb.href}>
				<Breadcrumbs.Crumb.Icon slot="icon" icon={crumb.icon} />
			</Breadcrumbs.Crumb>
		{:else}
			<Breadcrumbs.Crumb href={crumb.href}>
				<Breadcrumbs.Crumb.Label slot="label">{crumb.label}</Breadcrumbs.Crumb.Label>
			</Breadcrumbs.Crumb>
		{/if}
	{/each}
</Breadcrumbs>
Solid

svelte 
<script lang="ts">
	import { Breadcrumbs } from 'stwui';
   
   interface Crumb {
		icon?: MaterialIcon;
		label?: string;
		href: string;
	}

   const crumbs: Crumb[] = [
		{ icon: 'home', href: '/' },
		{ label: 'Projects', href: '/projecs' },
		{ label: 'Project Hero', href: '/projects/project-hero' }
	];
</script>

<Breadcrumbs type="solid">
	{#each crumbs as crumb}
		{#if crumb.icon && crumb.label}
			<Breadcrumbs.Crumb href={crumb.href}>
				<Breadcrumbs.Crumb.Icon slot="icon" icon={crumb.icon} />
				<Breadcrumbs.Crumb.Label slot="label">{crumb.label}</Breadcrumbs.Crumb.Label>
			</Breadcrumbs.Crumb>
		{:else if crumb.icon}
			<Breadcrumbs.Crumb href={crumb.href}>
				<Breadcrumbs.Crumb.Icon slot="icon" icon={crumb.icon} />
			</Breadcrumbs.Crumb>
		{:else}
			<Breadcrumbs.Crumb href={crumb.href}>
				<Breadcrumbs.Crumb.Label slot="label">{crumb.label}</Breadcrumbs.Crumb.Label>
			</Breadcrumbs.Crumb>
		{/if}
	{/each}
</Breadcrumbs>
Custom Divider

svelte 
<script lang="ts">
	import { Breadcrumbs } from 'stwui';
   
   interface Crumb {
		icon?: MaterialIcon;
		label?: string;
		href: string;
	}

   const crumbs: Crumb[] = [
		{ icon: 'home', href: '/' },
		{ label: 'Projects', href: '/projecs' },
		{ label: 'Project Hero', href: '/projects/project-hero' }
	];
</script>

<Breadcrumbs type="solid" class="h-12">
	{#each crumbs as crumb}
		{#if crumb.icon && crumb.label}
			<Breadcrumbs.Crumb href={crumb.href}>
				<div slot="divider" class="divider">|</div>
				<Breadcrumbs.Crumb.Icon slot="icon" icon={crumb.icon} />
				<Breadcrumbs.Crumb.Label slot="label">{crumb.label}</Breadcrumbs.Crumb.Label>
			</Breadcrumbs.Crumb>
		{:else if crumb.icon}
			<Breadcrumbs.Crumb href={crumb.href}>
				<div slot="divider" class="divider">|</div>
				<Breadcrumbs.Crumb.Icon slot="icon" icon={crumb.icon} />
			</Breadcrumbs.Crumb>
		{:else}
			<Breadcrumbs.Crumb href={crumb.href}>
				<div slot="divider" class="divider">|</div>
				<Breadcrumbs.Crumb.Label slot="label">{crumb.label}</Breadcrumbs.Crumb.Label>
			</Breadcrumbs.Crumb>
		{/if}
	{/each}
</Breadcrumbs>

Breadcrumbs Props

type 'solid' | 'ghost' ghost

Breadcrumbs Slots

default <Breadcrumbs.Crumb />

Breadcrumbs.Crumb Props

href string

Breadcrumbs.Crumb Slots

divider <Breadcrumbs.Crumb.Divider slot="divider" />
icon <Breadcrumbs.Crumb.Icon slot="icon" />
label <Breadcrumbs.Crumb.Label slot="label" />
default

Breadcrumbs.Crumb.Icon Props

icon MaterialIcon

Breadcrumbs.Crumb.Label Slots

default