How to Create Breadcrumb in React: Simple Guide with Example

To create a breadcrumb in React, build a functional component that receives an array of breadcrumb items and renders them as clickable links separated by a symbol like ">". Use map() to loop through items and React Router's Link for navigation if needed.

Syntax

A breadcrumb component typically takes a list of items representing the navigation path. Each item has a label and optionally a path for navigation. The component maps over these items and displays them separated by a symbol.

Example props structure:

• items: Array of objects with { label: string, path?: string }

jsx

function Breadcrumb({ items }) {
  return (
    <nav aria-label="breadcrumb">
      <ol>
        {items.map((item, index) => (
          <li key={index}>
            {item.path ? <a href={item.path}>{item.label}</a> : <span>{item.label}</span>}
            {index < items.length - 1 && ' > '}
          </li>
        ))}
      </ol>
    </nav>
  );
}

Example

This example shows a simple breadcrumb component with clickable links for all but the last item, which is plain text. It demonstrates how to pass breadcrumb items and render them with separators.

jsx

import React from 'react';

function Breadcrumb({ items }) {
  return (
    <nav aria-label="breadcrumb">
      <ol style={{ listStyle: 'none', display: 'flex', padding: 0 }}>
        {items.map((item, index) => (
          <li key={index} style={{ marginRight: '0.5rem' }}>
            {item.path ? (
              <a href={item.path} style={{ textDecoration: 'none', color: 'blue' }}>
                {item.label}
              </a>
            ) : (
              <span aria-current="page" style={{ fontWeight: 'bold' }}>
                {item.label}
              </span>
            )}
            {index < items.length - 1 && <span> &gt; </span>}
          </li>
        ))}
      </ol>
    </nav>
  );
}

export default function App() {
  const breadcrumbItems = [
    { label: 'Home', path: '/' },
    { label: 'Category', path: '/category' },
    { label: 'Product' } // current page, no path
  ];

  return <Breadcrumb items={breadcrumbItems} />;
}

Output

Home > Category > Product

Common Pitfalls

• Not using aria-label and aria-current for accessibility, which helps screen readers understand the breadcrumb.
• Forgetting to add unique key props when mapping items, causing React warnings.
• Using plain text for all items instead of links for navigable parts.
• Not styling the breadcrumb for clear separation and clickable areas.

jsx

/* Wrong: Missing keys and no accessibility */
function BreadcrumbWrong({ items }) {
  return (
    <nav>
      <ol>
        {items.map(item => (
          <li>
            {item.path ? <a href={item.path}>{item.label}</a> : item.label}
          </li>
        ))}
      </ol>
    </nav>
  );
}

/* Right: Added keys and accessibility attributes */
function BreadcrumbRight({ items }) {
  return (
    <nav aria-label="breadcrumb">
      <ol>
        {items.map((item, index) => (
          <li key={index}>
            {item.path ? (
              <a href={item.path}>{item.label}</a>
            ) : (
              <span aria-current="page">{item.label}</span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
}

Quick Reference

• Use a functional component that accepts an items array.
• Render each item as a link if it has a path, otherwise as plain text.
• Separate items visually with a symbol like >.
• Include aria-label="breadcrumb" on the nav and aria-current="page" on the current item for accessibility.
• Always provide unique key props when rendering lists.

Key Takeaways

Create a breadcrumb component that takes an array of items with labels and optional paths.

Render clickable links for all but the last breadcrumb item, which should be plain text with aria-current="page".

Use unique keys in list rendering and add aria-label="breadcrumb" for accessibility.

Separate breadcrumb items visually with a symbol like ">" for clarity.

Style breadcrumbs for clear navigation and ensure keyboard accessibility.