Skip to main content

Breadcrumb Block

The Breadcrumb Component is a fully customizable and accessible navigation breadcrumb built with React, TypeScript, and MUI. It provides a complete breadcrumb navigation interface with modern design patterns, flexible customization options, automatic chevron separators, and support for collapsible items.

πŸš€ Installation​

npm install @nodeblocks/frontend-breadcrumb-block@0.2.0

πŸ“– Usage​

import {Breadcrumbs} from '@nodeblocks/frontend-breadcrumb-block';
Live Editor
function BasicBreadcrumb() {
  return (
    <Breadcrumbs>
      <Breadcrumbs.BreadcrumbItem url="#home">Home</Breadcrumbs.BreadcrumbItem>
      <Breadcrumbs.BreadcrumbChevron />
      <Breadcrumbs.BreadcrumbItem url="#products">Products</Breadcrumbs.BreadcrumbItem>
      <Breadcrumbs.BreadcrumbChevron />
      <Breadcrumbs.BreadcrumbItem url="#laptop">Laptop</Breadcrumbs.BreadcrumbItem>
    </Breadcrumbs>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
maxItemsnumber8Maximum number of breadcrumbs to display. When exceeded, items collapse with an ellipsis
itemsBeforeCollapsenumber1Number of items to show before the collapsed ellipsis
itemsAfterCollapsenumber1Number of items to show after the collapsed ellipsis
childrenBlocksOverride | ReactNodeundefinedBreadcrumb items or function to override default blocks
classNamestringundefinedAdditional CSS class name
sxSxPropsundefinedMUI system props for styling

Note: The component extends MUI Breadcrumbs but uses a custom chevron separator system. The default MUI separator is hidden via CSS in favor of the built-in BreadcrumbChevron component.

Sub-Components​

The Breadcrumb component provides sub-components that can be used as children.

PropTypeDefaultDescription
urlstringRequiredThe URL/href for the breadcrumb link
childrenReactNode-Content to display as the breadcrumb item text

Note: This component renders as an MUI Link component with underline="hover" and color="inherit" styles applied.

A chevron icon separator that renders as an SVG arrow. The chevron inherits the theme's primary.contrastText color.

  • Compound Components: Must be manually added between each BreadcrumbItem
  • Block Override Pattern: Automatically inserted between items
Custom Separators

To customize the separator with the block override pattern, provide your own breadcrumbChevron in the blocks object.

🎨 Configuration examples​

The component uses the Nodeblocks theme by default with the following styles:

  • Background: Uses theme.palette.primary.main
  • Text color: Uses theme.palette.primary.contrastText
  • Typography: Breadcrumb items inherit theme.typography.caption
  • Chevron: Uses theme.palette.primary.contrastText color

Custom Styling with sx prop​

<Breadcrumbs
  sx={{
    padding: 2,
    backgroundColor: 'grey.100',
    borderRadius: 1,
  }}
>
  <Breadcrumbs.BreadcrumbItem url="#home">Home</Breadcrumbs.BreadcrumbItem>
  <Breadcrumbs.BreadcrumbChevron />
  <Breadcrumbs.BreadcrumbItem url="#page">Page</Breadcrumbs.BreadcrumbItem>
</Breadcrumbs>

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {Breadcrumbs} from '@nodeblocks/frontend-breadcrumb-block';
import React, {ReactNode} from 'react';
import {BreadcrumbsProps} from '@mui/material';

// Main component interface
interface BreadcrumbProps extends Omit<BreadcrumbsProps, 'children'> {
  children?: BlocksOverride<DefaultBlocks, CustomBlocks> | ReactNode;
  maxItems?: number;
  itemsBeforeCollapse?: number;
  itemsAfterCollapse?: number;
}

// BreadcrumbItem interface
interface BreadcrumbItemProps {
  url: string;
  children?: ReactNode;
}

// Usage example with data structure
interface BreadcrumbData {
  key: string;
  url: string;
  label: string;
}

// Dynamic breadcrumb generation from data
function DynamicBreadcrumb() {
  const breadcrumbItems: BreadcrumbData[] = [
    {key: 'home', url: '/home', label: 'Home'},
    {key: 'products', url: '/products', label: 'Products'},
    {key: 'current', url: '/products/laptop', label: 'Laptop'},
  ];

  return (
    <Breadcrumbs>
      {breadcrumbItems.map((item, index) => (
        <React.Fragment key={item.key}>
          {index > 0 && <Breadcrumbs.BreadcrumbChevron />}
          <Breadcrumbs.BreadcrumbItem url={item.url}>{item.label}</Breadcrumbs.BreadcrumbItem>
        </React.Fragment>
      ))}
    </Breadcrumbs>
  );
}

πŸ“ Notes​

  • The component extends MUI Breadcrumbs but uses a custom chevron separator system
  • The default MUI separator is hidden via CSS in favor of the built-in BreadcrumbChevron component
  • Breadcrumb items inherit typography from theme.typography.caption
  • When using the block override pattern, chevrons are automatically inserted between items
  • The maxItems, itemsBeforeCollapse, and itemsAfterCollapse props control the collapsing behavior
  • BreadcrumbItem renders as an MUI Link component with underline="hover" and color="inherit" styles
  • The default styling includes a primary background color and contrasting text color

Built with ❀️ using React, TypeScript, and MUI.