Breadcrumbs

Breadcrumbs helps users to navigate through the website.

Default

svelte

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

	const home = "svg-path";

   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" data={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" data={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, Icon } from 'stwui';
		
	interface Crumb {
		icon?: string;
		label?: string;
		href: string;
	}

	const home = "svg-path";

	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" data={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" data={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, Icon } from 'stwui';
		
	interface Crumb {
		icon?: string;
		label?: string;
		href: string;
	}

	const home = "svg-path";

	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" data={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" data={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

data	string (IconData)
viewBox	string	0 0 24 24
size	string	24px
width	string	24px
height	string	24px
color	string	currentColor
stroke	string \| undefined
fill	string	currentColor

Breadcrumbs.Crumb.Label Slots

default