Breadcrumb

Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  BreadcrumbPage,
} from "@govtechmy/myds-react/breadcrumb";

export default () => (
  <Breadcrumb>
    <BreadcrumbItem>
      <BreadcrumbLink />
      <BreadcrumbPage />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
  </Breadcrumb>
);

Examples

Variant

Use the variant prop to change the breadcrumb style!

Link vs Page

BreadcrumbLink is used for the parent page, while BreadcrumbPage is used for the current page. The current page is typically not clickable.

Ellipsis Crumb

Crumbs that are too long will be truncated with an ellipsis. The maximum width limit is 200px. User may hover over the crumb to see the full text.

Props

Breadcrumb