Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A snippet of a structured data breadcrumb made using TypeScript and React
export interface IBreadcrumb {
description: string;
url: string;
}
const StructuredBreadcrumb = ({
breadcrumbList
}: {
breadcrumbList: IBreadcrumb[];
}) => (
<ol
itemScope={true}
itemType="http://schema.org/BreadcrumbList"
className="breadcrumbs-container"
>
{breadcrumbList.map((breadcrumb: IBreadcrumb, i: number) => (
<li
key={i}
itemProp="itemListElement"
itemScope={true}
itemType="http://schema.org/ListItem"
>
<a
href={breadcrumb.url}
itemScope={true}
itemType="http://schema.org/Thing"
itemProp="item"
itemID={breadcrumb.url}
>
<span itemProp="name">{breadcrumb.description}</span>
</a>
<meta itemProp="position" content={i.toString()} />
</li>
))}
</ol>
);
export default StructuredBreadcrumb;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.