@finastra/breadcrumb

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