Breadcrumb

Breadcrumb is a navigation aid which helps user to understand current location in the website hierarchy.

Import

import { VKBreadCrumbs } from "@vivakits/react-components";

Seperator

The seperator prop is an icon component or simply an icon to be displayed between breadcrumb items. This functions as path seperator.

Multiple Separators

The separators prop allows to use different separators for each breadcrumb item. This provides more flexibility in designing navigation hierarchy.

Separator Styling

The separatorClassName prop allows to apply custom styles to the separator elements.

Option

The options prop is an array of objects that represents the breadcrumb items. Each object here contains title that displays the text for the breadcrumb item and href which contains the URL of the breadcrumb item. It also accepts icon to display icons before the title and renderDropDown to render custom dropdown menu.

WrapperClass

The wrapperClass prop is a CSS class used to style the wrapper of the breadcrumb items. If wrapperClass is not provided then the component uses the default style.

Style

The style prop is inline style to be applied to the breadcrumb wrapper, item, link, and href. It provides freedom to particularly style the other props.

Underline

The underline is a boolean prop that determines if the breadcrumb link should be underlined or not. It has default value set to true.

API Reference

BreadcrumbStyle types