Navigation

Breadcrumbs
Storybook

The Breadcrumbs component displays the user's current location on the website using a breadcrumb path.

Imports

The first alternative is recommended since they can reduce the application bundle.

1import Breadcrumbs from 'dd360-ds/Breadcrumbs'

1import { Breadcrumbs } from 'dd360-ds'

Usage

First Path

Second Path

Third Path

1import Breadcrumbs from 'dd360-ds/Breadcrumbs'
2
3<Breadcrumbs options={[{name: 'First Path'},{ name: 'Second Path'},{ name: 'Third Path'}]}/>

Options

The prop option is an array of objects that contains information about the routes in the Breadcrumbs component, including the name, icon, and redirect function of each route

Home

Docs

Breadcrumbs

1import Breadcrumbs from 'dd360-ds/Breadcrumbs'
2import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
3
4<Breadcrumbs
5    options={[
6        { name: 'Home', icon: () => <DynamicHeroIcon icon="HomeIcon" width="24" />, to: () => (window.location.href = '/') },
7        {
8            name: 'Docs',
9            icon: () => <DynamicHeroIcon icon="BeakerIcon" width="24" />,
10            to: () => (window.location.href = '/docs/get-started/getting-started')
11        },
12        {
13            name: 'Breadcrumbs',
14            icon: () => <DynamicHeroIcon icon="CalculatorIcon" width="24" />,
15            to: () => (window.location.href = '/docs/navigation/breadcrumbs')
16        }
17    ]}
18/>
19

Separator

With the prop separator you can to change the default separator icon between the options