Mantine Breadcrumbs

BreadcrumbsSimple.tsx

import {
  rem,
  Text,
  Breadcrumbs,
  createStyles,
} from '@mantine/core';
import { IconChevronRight } from '@tabler/icons-react';
import Link from 'next/link';

const useStyles = createStyles((theme) => ({
  root: {
    fontSize: rem(theme.fontSizes.xs),
    flexWrap: 'nowrap',
    overflow: 'auto',
    scrollSnapType: 'x mandatory',
    '& > *': {
      scrollSnapAlign: 'center',
    },
    '::-webkit-scrollbar': { display: 'none' },
    a: {
      color: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.dark[2],
    },
  },
  separator: {
    color: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.dark[2],
    padding: 0,
    margin: 0,
  },
}));

export default function BreadcrumbsSimple(
  props:
  {
    data: {
      title: string;
      href?: string;
    }[];
  },
) {
  const { data } = props;
  const items = data.map((item, index) => (
    item.href ? <Link key={index} href={item.href}>{item.title}</Link>
      : <Text key={index}>{item.title}</Text>
  ));

  const itemListElement: {
    '@type': string;
    position: number;
    name: string;
    item?: string;
  }[] = data.map((item, index) => ({
    '@type': 'ListItem',
    position: index + 1,
    name: item.title,
    item: `${process.env.WEBSITE_URL || ''}${item.href || '#'}`,
  }));

  const { classes } = useStyles();

  return <>
    <Breadcrumbs
      aria-label="breadcrumb"
      mb="md"
      separator={<IconChevronRight strokeWidth={1} size={rem('1.5rem')} />}
      classNames={{
        root: classes.root,
        separator: classes.separator,
      }}>{items}</Breadcrumbs>
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{
        __html: JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'BreadcrumbList',
          itemListElement,
        }),
      }}
    />
  </>;
}