Breadcrumbs
A breadcrumbs is a list of links that help visualize a page's location within a site's hierarchical structure, it allows navigation up to any of the ancestors.
setup
Import the Breadcrumbs component in a script tag.
Svelte Copy
import { Breadcrumbs } from "@mgisolutions/design-system/svelte";
const data = [
{
label: "Dashboard",
href: "breadcrumbs-dashboard",
},
{
label: "Link 1",
href: "breadcrumbs-link-1",
},
{
label: "Link 2",
href: "",
},
];
Basic usage
Basic usage Badge
Demonstrate
Svelte Copy
<Breadcrumbs breadcrumbs={data} />
Component Data
- props
| Name | Description | Type | Default |
|---|---|---|---|
| separator | The string used to separate the breadcrumbs | string | / |
| gutter | The gutter value allows you control over the space between the breadcrumb elements. Calculated in a unit corresponding to 4px | number | 4 |
| align | Specify how to align the breadcrumbs horizontally | string | left |
| linkColor | The color of the breadcrumb. | string | primary |
| separatorColor | The color of the separator. | string | primary |
| lastItemColor | The color of the last item. | string | primary |
| breadcrumbs | The items of the breadcrumb. | Array | primary |