Skip to main content

​
Overview

Breadcrumbs allow users to understand their current location within a website’s hierarchy and navigate back to parent pages. They provide a trail of links showing the path from the homepage to the current page.

​
Installation

npm install @naturacosmeticos/natds-web

​
Import

import { Breadcrumbs, Link } from '@naturacosmeticos/natds-web';

​
Props

​
children
ReactNode
required
The breadcrumb children, typically Link components.
​
aria-label
string
The aria-label of the Breadcrumbs root node.
​
separator
ReactNode
Custom separator node. Defaults to "/".
​
maxItems
number
Specifies the maximum number of breadcrumbs to display. When exceeded, only the first and last items are shown with an ellipsis in between. Defaults to 8.
​
itemsBeforeCollapse
number
If max items is exceeded, the number of items to show before the ellipsis. Defaults to 1.
​
itemsAfterCollapse
number
If max items is exceeded, the number of items to show after the ellipsis. Defaults to 1.
​
expandText
string
Override the default label for the expand button. Defaults to "Show path". Useful for localization.
​
component
React.ReactElement
The component used for the root node. Defaults to "nav" element.
​
classes
object
Override or extend the styles applied to the component. See Material Breadcrumbs CSS API.

​
Usage

​
Basic Breadcrumbs

import { Breadcrumbs, Link } from '@naturacosmeticos/natds-web';

function BasicBreadcrumbs() {
  return (
    <Breadcrumbs aria-label="breadcrumb">
      <Link color="inherit" href="/" variant="body2">
        Design System
      </Link>
      <Link color="inherit" href="/components" variant="body2">
        Components
      </Link>
      <Link color="textPrimary" aria-current="page" variant="body2">
        Breadcrumbs
      </Link>
    </Breadcrumbs>
  );
}

​
With Slash Separator (Default)

import { Breadcrumbs, Link } from '@naturacosmeticos/natds-web';

function SlashSeparator() {
  return (
    <Breadcrumbs aria-label="breadcrumb" separator="/">
      <Link color="inherit" href="/" variant="body2">
        Home
      </Link>
      <Link color="inherit" href="/products" variant="body2">
        Products
      </Link>
      <Link color="textPrimary" aria-current="page" variant="body2">
        Category
      </Link>
    </Breadcrumbs>
  );
}

​
With Custom Separators

import { Breadcrumbs, Link } from '@naturacosmeticos/natds-web';

// With hyphen separator
function HyphenSeparator() {
  return (
    <Breadcrumbs separator="-">
      <Link color="inherit" href="/" variant="body2">Home</Link>
      <Link color="inherit" href="/catalog" variant="body2">Catalog</Link>
      <Link color="textPrimary" aria-current="page" variant="body2">Item</Link>
    </Breadcrumbs>
  );
}

// With right angle quote
function AngleSeparator() {
  return (
    <Breadcrumbs separator=">">
      <Link color="inherit" href="/" variant="body2">Home</Link>
      <Link color="inherit" href="/catalog" variant="body2">Catalog</Link>
      <Link color="textPrimary" aria-current="page" variant="body2">Item</Link>
    </Breadcrumbs>
  );
}

​
With Icons

import { 
  Breadcrumbs, 
  Link, 
  Icon, 
  Spacing 
} from '@naturacosmeticos/natds-web';

function BreadcrumbsWithIcons() {
  return (
    <Breadcrumbs aria-label="breadcrumb">
      <Link 
        color="inherit" 
        href="/" 
        variant="body2"
        style={{ display: 'flex' }}
      >
        <Spacing display="inline-flex" marginRight="tiny">
          <Icon size="tiny" name="outlined-navigation-home" />
        </Spacing>
        Design System
      </Link>
      <Link color="inherit" href="/components" variant="body2">
        Components
      </Link>
      <Link color="textPrimary" aria-current="page" variant="body2">
        Breadcrumbs
      </Link>
    </Breadcrumbs>
  );
}

​
With Body1 Typography

import { Breadcrumbs, Link, Icon, Spacing } from '@naturacosmeticos/natds-web';

function LargerBreadcrumbs() {
  return (
    <Breadcrumbs aria-label="breadcrumb">
      <Link 
        color="inherit" 
        href="/" 
        variant="body1"
        style={{ display: 'flex' }}
      >
        <Spacing display="inline-flex" marginRight="tiny">
          <Icon size="tiny" name="outlined-navigation-home" />
        </Spacing>
        Design System
      </Link>
      <Link color="inherit" href="/components" variant="body1">
        Components
      </Link>
      <Link color="textPrimary" aria-current="page" variant="body1">
        Breadcrumbs
      </Link>
    </Breadcrumbs>
  );
}

​
With Collapsed Items

import { Breadcrumbs, Link } from '@naturacosmeticos/natds-web';

function CollapsedBreadcrumbs() {
  return (
    <Breadcrumbs 
      maxItems={4}
      itemsBeforeCollapse={2}
      itemsAfterCollapse={1}
      aria-label="breadcrumb"
    >
      <Link color="inherit" href="/" variant="body2">Home</Link>
      <Link color="inherit" href="/level1" variant="body2">Level 1</Link>
      <Link color="inherit" href="/level2" variant="body2">Level 2</Link>
      <Link color="inherit" href="/level3" variant="body2">Level 3</Link>
      <Link color="inherit" href="/level4" variant="body2">Level 4</Link>
      <Link color="inherit" href="/level5" variant="body2">Level 5</Link>
      <Link color="textPrimary" aria-current="page" variant="body2">Current</Link>
    </Breadcrumbs>
  );
}

​
With Router Integration

import { Breadcrumbs, Link } from '@naturacosmeticos/natds-web';
import { Link as RouterLink, useLocation } from 'react-router-dom';

function RouterBreadcrumbs() {
  const location = useLocation();
  const pathnames = location.pathname.split('/').filter((x) => x);

  return (
    <Breadcrumbs aria-label="breadcrumb">
      <Link 
        component={RouterLink} 
        to="/" 
        color="inherit" 
        variant="body2"
      >
        Home
      </Link>
      {pathnames.map((value, index) => {
        const last = index === pathnames.length - 1;
        const to = `/${pathnames.slice(0, index + 1).join('/')}`;

        return last ? (
          <Link 
            key={to}
            color="textPrimary" 
            aria-current="page"
            variant="body2"
          >
            {value}
          </Link>
        ) : (
          <Link
            key={to}
            component={RouterLink}
            to={to}
            color="inherit"
            variant="body2"
          >
            {value}
          </Link>
        );
      })}
    </Breadcrumbs>
  );
}

​
Best Practices

  • Always include the current page as the last breadcrumb
  • Make all breadcrumbs except the current page clickable links
  • Use consistent separators throughout your application
  • Keep labels concise and descriptive
  • Start with the homepage or root level
  • Consider collapsing for deep hierarchies (more than 5 levels)

​
Accessibility

  • Use aria-label="breadcrumb" on the Breadcrumbs component
  • Add aria-current="page" to the current page link
  • The current page should use color="textPrimary" and not be clickable
  • Ensure adequate color contrast for all link states
  • Test with keyboard navigation
  • Screen readers announce the navigation context automatically

​
SEO Considerations

  • Use semantic HTML with <nav> element (default)
  • Implement structured data (Schema.org BreadcrumbList)
  • Ensure URLs are descriptive and match the breadcrumb labels
  • Make breadcrumbs visible on all pages where appropriate

​
Related Components

​
Material-UI Reference

This component is based on Material-UI’s Breadcrumbs. For advanced usage, see the Material-UI Breadcrumbs documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us