Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Breadcrumb with Border (Home Icon) for Svelte

A breadcrumb with a home icon, then Components and Breadcrumb, inside a rounded border that hugs the trail.

UI library: Ark UI

The first crumb is a home icon, named Home for screen readers, with no visible word. Then Components, then Breadcrumb as the current page. A rounded border hugs the line. The box does not react on hover.

Use it when the root should be an icon and the trail should read as its own chip. A site menu is a Navigation Menu. In Svelte, Ark UI does not know which page is current.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Breadcrumb anatomy: link, ellipsis, separator, item, page

Usage

<Breadcrumb class="w-fit rounded-lg border px-3 py-2"><BreadcrumbList><BreadcrumbItem><BreadcrumbLink>{#snippet asChild(props)}<a {...props({ "aria-label": "Home", href: "/" })}><HomeIcon aria-hidden="true" class="size-4" /></a>{/snippet}</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbLink>{#snippet asChild(props)}<a {...props({ href: "/components" })}>Components</a>{/snippet}</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>

FAQ

How is the border applied?

Breadcrumb takes w-fit rounded-lg border px-3 py-2. The nav becomes the box, and w-fit keeps it only as wide as the trail instead of the full row.

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.

Which separator sits between the crumbs?

An empty BreadcrumbSeparator renders a chevron, hidden from assistive tech.

Does the box react on hover?

No. Only the links change, to the foreground color. The border and padding belong to the nav, which isn't a control.

Can I give the box a fill?

Add a token class such as bg-muted or bg-card next to the border classes. Keep it light so the links keep their contrast.

How do the links go through my router?

BreadcrumbLink takes asChild, and the demo puts an anchor inside. Spread the props it gives you onto your router's link.

API Reference

Breadcrumb

No extra props in this demo. The rest is on the Breadcrumb page.

All 14 breadcrumb examples