Breadcrumbs

Availity breadcrumbs

Installation

npm

npm install @availity/breadcrumbs --save

Yarn

yarn add @availity/breadcrumbs

Example

import React from 'react';

import Breadcrumbs from '@availity/breadcrumbs';

import { BreadcrumbItem } from 'reactstrap';

const BasicExample = () => (

<div>

<h3>Basic Example</h3>

<Breadcrumbs active="Payer Space" />

</div>

);

const CrumbsPropExample = () => (

<div>

<h3>Example with crumbs prop</h3>

<Breadcrumbs

active="Payer Space"

crumbs={[

{ name: 'Grand Parent', url: '/grand-parent' },

{ name: 'Parent', url: '/parent' },

]}

/>

</div>

);

const ChildrenExample = () => (

<div>

<h3>Example with custom breadcrumb children</h3>

<Breadcrumbs active="Current Page">

<BreadcrumbItem>Custom Bread Crumb</BreadcrumbItem>

</Breadcrumbs>

</div>

);

Live example: Storybook

Props

active?: string

The name of the active page (the page the user is currently on).

crumbs?: object[]

The ancestor pages. Objects in array contain name (String) and url (String) properties.

emptyState?: string

The value to display when the active page or an ancestor does not have a value. Default: "…"

children?: BreadcrumbItem | BreadcrumbItem[]

The children must be a reactstrap BreadcrumbItem components.

homeUrl?: string

Url for the Home route. Default: public/apps/dashboard

linkTag?: React.ComponentType<React.HTMLAttributes<HTMLAnchorElement>> | string

Custom link tag for the links. Default: <a>