Breadcrumb

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

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

export function ComponentPage({ name }: { name: string }) {
	return (
		<Hero
			trail={
				<Breadcrumb
					items={[
						{ label: "Components", href: "/components" },
						{ label: name },
					]}
					origin="https://sushindustries.com"
				/>
			}
			title={name}
		/>
	);
}

What this example is not

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 sits inside HeroHeroThe head of a documentation page: trail, element name, version, measured facts, actions and a responsive shot. Folds to one column by the room it has, not by the size of the window.@sushindustries/ui · docs's trail slot here, which is where every element page on this site puts it - the component itself has no opinion about placement and renders the same trail whether it sits above a hero, above an article, or on its own.