Breadcrumb

The Breadcrumb component is a navigational helper. It accepts a list of labels (strings) as an input and dispatches a selected event each time the user clicks on a label.

Usage

Import

npm i @finastra/breadcrumb

import '@finastra/breadcrumb';
...
<fds-breadcrumb items="[
    {
        label: 'Home',
        link: '#'
    },
    {
        label: 'Link 2',
        link: '#link-2'
    },
    {
        label: 'Link 3',
        link: '#link-2/link-3'
    }
]"></fds-breadcrumb>

API

Properties

| Property | Attribute | Type | Default | Description | |----------|-----------|---------|---------|----------------------------| | items | items | Array | [] | A list of items to display |

Events

| Event | Type | |------------|---------------------------------| | selected | CustomEvent<{ item: Crumb; }> |

CSS Custom Properties

| Property | Type | Default | Description | |----------------------------------|-------|---------|-------------------------------------------------| | --fds-breadcrumb-divider | | "'/'" | Set the character used as divider between items | | --fds-breadcrumb-divider-color | color | "auto" | Set the character used as divider between items |