Skip to main content

Breadcrumbs

Availity breadcrumbs

Version

Installation

npm

npm install @availity/breadcrumbs reactstrap@^8.0.0

Yarn

yarn add @availity/breadcrumbs reactstrap@^8.0.0

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: "&hellip;"

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>