shadcn.io is an independent project built on shadcn/ui
The first crumb is a home icon, named Home for screen readers. Slash icons separate it from Components and from Breadcrumb, the current page. The last crumb is not a link.
Use it when a path should start with a home icon instead of the word Home. A bullet is lighter for a marketing page. A site menu is a Navigation Menu. In Svelte, Ark UI does not parse the path.
Installation
Anatomy
Usage
<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink>{#snippet asChild(props)}<a {...props({ "aria-label": "Home", href: "/" })}><HomeIcon aria-hidden="true" class="size-4" /></a>{/snippet}</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator><SlashIcon aria-hidden="true" /></BreadcrumbSeparator><BreadcrumbItem><BreadcrumbLink>{#snippet asChild(props)}<a {...props({ href: "/components" })}>Components</a>{/snippet}</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator><SlashIcon aria-hidden="true" /></BreadcrumbSeparator><BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>FAQ
How is the slash drawn?
A SlashIcon is the child of BreadcrumbSeparator, in place of the default chevron. The separator is hidden from assistive tech.
How is the home icon named?
The link to / holds only a HomeIcon at size-4, hidden from assistive tech, so the link carries aria-label="Home". Screen readers announce it as the Home link.
How big is the slash?
The separator styles size its icon, the same as the default chevron, so the slash lines up with the text. Add a size class to the icon to change it.
Does the slash work right to left?
The trail reads from the right in a right-to-left layout. A slash doesn't point, so unlike the chevron it needs no flipping.
API Reference
Breadcrumb
No extra props in this demo. The rest is on the Breadcrumb page.
