Breadcrumb Block

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

---

🚀 Installation

npm install @nodeblocks/frontend-breadcrumb-block

---

📖 Usage

import {Breadcrumbs} from '@nodeblocks/frontend-breadcrumb-block';

Basic Usage

Live Editor

  function BasicBreadcrumb() {
    return (
      <Breadcrumbs>
        <Breadcrumbs.BreadcrumbItem url="#home">
            Home
        </Breadcrumbs.BreadcrumbItem>
        <Breadcrumbs.BreadcrumbChevron />
        <Breadcrumbs.BreadcrumbItem url="#products">
            Products
        </Breadcrumbs.BreadcrumbItem>
      </Breadcrumbs>
    );
  }

Result

Loading...

Advanced Usage

Live Editor

  function AdvancedBreadcrumb() {
    return (
      <Breadcrumbs>
        {({ defaultBlocks, defaultBlockOrder }) => ({
          blocks: {
            ...defaultBlocks,
            
            // 🏠 Home breadcrumb with props override
            home: {
              ...defaultBlocks.breadcrumbItem,
              props: {
                ...defaultBlocks.breadcrumbItem.props,
                url: "#home",
                children: "🏠 Home",
                style: { fontWeight: 'bold' }
              },
            },
            
            // 📱 Products breadcrumb with custom styling
            products: {
              ...defaultBlocks.breadcrumbItem,
              props: {
                ...defaultBlocks.breadcrumbItem.props,
                url: "#products",
                children: "📱 Products",
                className: "custom-product-link"
              },
            },
            
            // 🔍 Full block override with custom component
            search: (
              <span style={{ 
                color: '#fff', 
                backgroundColor: '#007bff', 
                padding: '4px 8px', 
                borderRadius: '4px',
                fontSize: '12px'
              }}>
                🔍 Search Results
              </span>
            ),
            
            // 🎨 Custom chevron override
            breadcrumbChevron: (
              <span style={{ 
                margin: '0 8px',
                color: '#ffd700',
                fontWeight: 'bold'
              }}>
                →
              </span>
            ),
            
            // 📄 Current page (no link)
            currentPage: (
              <span style={{ 
                color: '#ccc',
                fontStyle: 'italic'
              }}>
                Current Page
              </span>
            ),
          },
          blockOrder: ['home', 'products', 'search', 'currentPage'],
        })}
      </Breadcrumbs>
    );
  }

Result

Loading...

---

🔧 Props Reference

Main Component Props

Prop	Type	Default	Description
className	string	undefined	Additional CSS class name for styling the breadcrumb container
children	BlocksOverride	undefined	Function to override default blocks or add custom breadcrumb items

Note: The main component inherits all HTML nav element props.

Sub-Components

The Breadcrumb component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

Breadcrumbs.BreadcrumbItem

Prop	Type	Default	Description
url	string	Required	The URL/href for the breadcrumb link
children	ReactNode	Required	Content to display as the breadcrumb item text

Note: This component inherits all HTML a element props.

Breadcrumbs.BreadcrumbChevron

This component accepts no props and renders a chevron separator.

---

🔧 TypeScript Support

Full TypeScript support with comprehensive type definitions:

import {Breadcrumbs} from '@nodeblocks/frontend-breadcrumb-block';
import {ComponentProps, ReactNode} from 'react';

// Main component interface
interface BreadcrumbProps extends Omit<ComponentProps<'nav'>, 'children'> {
  children?: BlocksOverride<DefaultBlocks, CustomBlocks>;
  className?: string;
}

// BreadcrumbItem interface
interface BreadcrumbItemProps extends Omit<ComponentProps<'a'>, 'children'> {
  url: string;
  children: ReactNode;
}

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

const breadcrumbItems: BreadcrumbItem[] = [
  { key: 'home', url: '#home', label: 'Home' },
  { key: 'products', url: '#products', label: 'Products' },
  { key: 'current', url: '#products/laptop', label: 'Laptop' },
];

// Example with anchor props
function AdvancedBreadcrumb() {
  return (
    <Breadcrumbs>
      {breadcrumbItems.map((item, index) => (
        <>
          <Breadcrumbs.BreadcrumbItem key={item.key} url={item.url}>
            {item.label}
          </Breadcrumbs.BreadcrumbItem>
          {index < breadcrumbItems.length - 1 && <Breadcrumbs.BreadcrumbChevron />}
        </>
      ))}
    </Breadcrumbs>
  );
}

---

Built with ❤️ using React, TypeScript, and modern web standards.