Components
Navigation
Breadcrumb

Breadcrumb

Breadcrumb

Editable Example

import { Breadcrumb } from "@wfp/react";

() => {
  return <Breadcrumb className="custom-class" />;
};
PropDefaultDescriptionValue

children

React.ReactNode
–

Recommended to use BreadcrumbItem as the direct children for structured navigation.

className

string
–

The CSS class name to be placed on the wrapping element.

BreadcrumbItem

Expand code

Editable Example

import {
  Breadcrumb,
  BreadcrumbItem,
} from "@wfp/react";

() => {
  return (
    <BreadcrumbItem
      className="custom-class"
      href="https://www.designsystem.wfp.org/"
    />
  );
};
PropDefaultDescriptionValue

href

string
–

Specify an link for the BreadcrumbItem

children

React.ReactNode
–

The content to be rendered inside the component. This can be:

  • A string, in which case you must also provide the href prop to define a link
  • An <a> tag, allowing you to pass a fully defined anchor element

Use this prop to specify the elements or text to display within the component

disableLink

boolean
–

Specify BreadcrumbItem to be interactive/enabled or non-interactive/disabled

className

string
–

The CSS class name to be placed on the wrapping element

BreadcrumbHome

Expand code

Editable Example

import {
  Breadcrumb,
  BreadcrumbHome,
} from "@wfp/react";

() => {
  return (
    <BreadcrumbHome
      className="custom-class"
      hometext="Text for the Home Icon"
    />
  );
};
PropDefaultDescriptionValue

hometext

ReactNode
–

Specify an optional text for the Home Icon

className

string
–

Specify an optional className to be added to the Home Icon

On this page

References