Breadcrumbs
Breadcrumbs helps users to navigate through the website.
Usage
import { Breadcrumbs } from 'stwui';
import Breadcrumbs from 'stwui/breadcrumbs';
<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>
<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>
With Custom Dividers
<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 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
Breadcrumbs Class Identifiers
| stwui-breadcrumbs |
| stwui-breadcrumbs-crumb |
| stwui-breadcrumbs-crumb-divider |
| stwui-breadcrumbs-crumb-label |
