Default Separator
Vuero provides a <VBreadcrumb /> component. Default breadcrumb items are separated by a slash sign. To show icons, use the with-icons prop. You can also change the alignment by using the align prop (possible values are center and right). Pass an Array to the items prop to render the component. See markup for more details about usage.
Arrow Separator
Breadcrumb items can be separated by alternative separators. To display arrow breadcrumb separators, set the separator prop to arrow. See markup for more details.
Bullet Separator
Breadcrumb items can be separated by alternative separators. To display bullet breadcrumb separators, set the separator prop to bullet. See markup for more details.
Dot Separator
Breadcrumb items can be separated by alternative separators. To display dot breadcrumb separators, set the separator prop to dot. See markup for more details.
Succeeds Separator
Breadcrumb items can be separated by alternative separators. To display succeeds breadcrumb separators, set the separator prop to succeeds. See markup for more details.
VBreadcrumb Props
Here is the full props available for <VBreadcrumb /> component:
| Props | Default | Type |
|---|---|---|
| items required | null | Array<{ label: string hideLabel?: boolean icon?: string link?: string to?: RouteLocationAsString}> |
| separator | undefined | arrow, bullet, dot, succeeds |
| infratitle | undefined | string |
| center | false | boolean |
| lighter | false | boolean |
| narrow | false | boolean |
| mResponsive | false | boolean |
| tResponsive | false | boolean |