Breadcrumb

The Breadcrumb component provides a navigation aid that helps users understand their location within a website or application.

Example Usage

import React from 'react';
import { Breadcrumb } from '@ginger-society/ginger-ui';

const paths = [
  { path: 'home', label: 'Home' },
  { path: 'home/accounts', label: 'Accounts' },
  { path: 'home/accounts/receivables', label: 'Receivables' }
];

const handleBreadcrumbClick = (path) => {
  console.log('Breadcrumb clicked:', path);
  // Implement navigation or any other logic here
};

export const BreadcrumbExample = () => (
  <Breadcrumb value={paths} onClick={handleBreadcrumbClick} />
);

Demo

Props

Breadcrumb

Prop	Type	Description
value	BreadcrumbItem[]	Required. Array of breadcrumb items.
onClick	(path: string) => void	Required. Callback function called when a breadcrumb item is clicked.

BreadcrumbItem

Prop	Type	Description
path	string	Required. The path associated with the item.
label	string	Required. The label to be displayed.

Example Usage

Basic Breadcrumb

import React from 'react';
import { Breadcrumb } from '@ginger-society/ginger-ui';

const paths = [
  { path: 'home', label: 'Home' },
  { path: 'home/accounts', label: 'Accounts' },
  { path: 'home/accounts/receivables', label: 'Receivables' }
];

const handleBreadcrumbClick = (path) => {
  console.log('Breadcrumb clicked:', path);
  // Implement navigation or any other logic here
};

const BasicBreadcrumb: React.FC = () => (
  <Breadcrumb value={paths} onClick={handleBreadcrumbClick} />
);

export default BasicBreadcrumb;