Published

Breadcrumb

Editable Example

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

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

Prop	Default	Description	Value
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/"
    />
  );
};

Prop	Default	Description	Value
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	disableLink
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"
    />
  );
};

Breadcrumb

Editable Example

children

className

BreadcrumbItem

Editable Example

href

children

disableLink

className

BreadcrumbHome

Editable Example

hometext

className

On this page

References

Prop	Default	Description	Value
hometext `ReactNode`	–	Specify an optional text for the `Home` Icon
className `string`	–	Specify an optional className to be added to the `Home` Icon