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>