import { Breadcrumbs } from "@vitality-ds/components";

Use Breadcrumbs as a lightweight way to help users visualise their position within the hierarchy of pages. Breadcrumbs should never include the top-most level of navigation (ie. the App root). Each breadcrumb item should include a href URL to link to the parent page and the current page title should be displayed as text only.

<DocsFlex css={{ flexGrow: 1, padding: "$xl", backgroundColor: "$grey1" }}>
  <Stack>
    <Breadcrumbs
      items={[
        { text: "Settings", href: "#" },
        { text: "Manage Roles", href: "#" },
        {
          text: "Administrator Settings",
          href: "#",
        },
      ]}
    />
    <Typography variant="pageTitle">Administrator Settings</Typography>
    <Typography color="lowContrast">Page content</Typography>
  </Stack>
</DocsFlex>

In certain instances, rather than employing a typical HTML anchor tag for breadcrumb navigation, you might choose to utilise client-side routing via a library such as React Router. These React libraries offer components tailored for this purpose, such as React Router's <Link>. Instead of providing an object with text and a href, you can supply a linkComponent to each item in the items array, which can be any valid React component. This offers a type-safe and clearly visible approach to using more complex page linking tools.

Vitality will wrap your component, applying inheritable text styles. It will also try to apply link-specific styling, such as color and text-decoration, to the underlying component by targeting child anchor tags. However, if your underlying component does not render as an anchor, this styling might not apply correctly.

The final breadcrumb will never be a link (as it is your current route) and as such linkComponent will not render if passed. Use the text prop to render the last item.

() => {
  const CustomLink = ({ children }) => <a href="#">{children}</a>;

  return (
    <DocsFlex css={{ flexGrow: 1, padding: "$xl", backgroundColor: "$grey1" }}>
      <Stack>
        <Breadcrumbs
          items={[
            { linkComponent: <CustomLink>Settings</CustomLink> },
            { linkComponent: <CustomLink>Manage Roles</CustomLink> },
            { text: "Administrator Settings" },
          ]}
        />
        <Typography variant="pageTitle">Administrator Settings</Typography>
        <Typography color="lowContrast">Page content</Typography>
      </Stack>
    </DocsFlex>
  );
};

The text used in breadcrumbs should represent the page title of a page and thus should generally be quite short and concise. In some cases where a page's title may represent an article, letter or particularly long names, the content is truncated with a maximum width.

When hovered, the full text is displayed in a tooltip above the text.

<Breadcrumbs
  items={[
    { text: "Patients", href: "#" },
    { text: "Patient Details", href: "#" },
    {
      text: "New Patient named Ms. Alessandra Annaliese Arabella Clementine.",
      href: "#",
    },
  ]}
/>

The below props are passed for each item in the above mentioned items prop.