Skip to content

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

Free

Breadcrumb with Border (Standard) for Ark UI

A breadcrumb reading Home, Components, and Breadcrumb, inside a rounded border that hugs the trail.

The trail reads Home, Components, then Breadcrumb as the current page. A rounded border hugs that line. The box does not react on hover. Only the links do.

Use it on a busy page where a plain trail would blend in. A site menu is a Navigation Menu, not a path. In React, Ark UI does not draw the border from the route.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

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

Usage

<Breadcrumb className="w-fit rounded-lg border px-3 py-2">
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <Link href="/">Home</Link>
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <Link href="/components">Components</Link>
      </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 trail announced?

Breadcrumb renders a nav labeled breadcrumb around an ordered list, so screen readers announce a breadcrumb landmark and the number of items. Home and Components are read as links.

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 the Next.js Link inside it. Put your router's link there instead.

API Reference

Breadcrumb

Sets asChild. The rest is on the Breadcrumb page.

All 14 breadcrumb examples