components
Breadcrumbs
v.1.0.0 | Saturn
StorybookList of links that help visualize a page's location within a site's hierarchical structure.
<Breadcrumbs
variant={'DEFAULT'}
link={{ variant: 'PRIMARY', action: 'NAVIGATION', textVariant: 'DEFAULT' }}
dividerIcon={{ icon: 'ICON_CHEVRON_RIGHT' }}
crumbs={[
{ name: 'Level A', url: '#' },
{ name: 'Level B', url: '#' },
{ name: 'Level C', url: '#' },
{ name: 'Level D', url: '#' },
]}Variant
In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.
We have set this predefine style for its quick use, access them through the variant prop:
<Breadcrumbs
variant={'DEFAULT'}
link={{ variant: 'PRIMARY', action: 'NAVIGATION', textVariant: 'DEFAULT' }}
dividerIcon={{ icon: 'ICON_CHEVRON_RIGHT' }}
crumbs={[
{ name: 'Level A', url: '#' },
{ name: 'Level B', url: '#' },
{ name: 'Level C', url: '#' },
{ name: 'Level D', url: '#' },
]}Crumbs
Array of the crumbs set through CrumbType[]. In each element of the array, name and url should be included. In addition, some required props have to be filled:
-
link: required for setting the variant of the link.
Also, here are optional props to further customize the display:
-
dividerIcon: optional prop used to set the element displayed between each crumb.
-
minCharLimit: maximum number of character until truncates into '...'.
<Breadcrumbs
variant={'DEFAULT'}
link={{ variant: 'PRIMARY', action: 'NAVIGATION', textVariant: 'DEFAULT' }}
dividerIcon={{ icon: 'ICON_CHEVRON_RIGHT' }}
minCharLimit={4}
crumbs={[{name: 'Level A', url: '#'}, {name: 'Level B', url: '#'}, {name: 'Level C', url: '#'}, {name: 'Level D', url: '#'}]}
/>