@finastra/breadcrumb NPM

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