Breadcrumb

@sushindustries/ui

The trail, told twice from one list: a visible nav with correct ARIA, and the schema.org BreadcrumbList rendered from the same array.

5 min read
View as MarkdownEdit on GitHub

Install commands are on Home, attached from the registry - they are not written here, because a second copy is a copy that goes stale. This tab starts after the install worked.

Use it

import { Breadcrumb } from "@sushindustries/ui";

const items = [
	{ label: "Components", href: "/components" },
	{ label: "Accordion" },
];

export function Example() {
	return <Breadcrumb items={items} origin="https://sushindustries.com" />;
}
tsx

What you should see

"Components" as a link, a chevron separator, then "Accordion" as plain text with no underline - the last crumb is never a link, since it is the page already being read. With origin set there is also a <script type="application/ld+json"> in the output carrying a BreadcrumbList, invisible on the page but present in the source.

If nothing happens

BreadcrumbBreadcrumbThe trail, told twice from one list: a visible nav with correct ARIA, and the schema.org BreadcrumbList rendered from the same array.@sushindustries/ui · docs returns null for an empty items array rather than an empty <nav> - check the array actually has entries before assuming the component is broken. Missing structured data in a page's source usually means origin was left unset; it is optional, and without it the component renders the visible trail only.

UsesIconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content