7onicDESIGN SYSTEM

Breadcrumb

Breadcrumb hierarchically displays the current position within a site, helping users quickly navigate back to parent pages.

3
Sizes
6
Parts
Collapse
Auto Collapse
Pure
React

Playground

Preview
D
Size
Separator
Items
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Products</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Category</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Sizes

sm
Font12px
Icon14px
Gap6px
default
Font13px
Icon14px
Gap8px
lg
Font14px
Icon16px
Gap8px

Features

Auto Collapse

Auto-collapse long paths with maxItems — control display counts with itemsBeforeCollapse / itemsAfterCollapse

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Custom Separator

Any ReactNode as separator — slash, dot, or any custom element

<Breadcrumb separator={<span className="text-text-subtle">/</span>}>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Products</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Detail</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Custom Link (asChild)

Compose with Next.js Link or any custom link via asChild — styles are inherited automatically

import Link from 'next/link'

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <Link href="/home">Home</Link>
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <Link href="/products">Products</Link>
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Detail</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API

Component Structure

Breadcrumb— Radix Slot
.List.Item.LinkProps.Page.Separator.Ellipsis

Props

Breadcrumb

separatorChevronRight icon
ReactNode

Separator element between items

size"default"
"sm" | "default" | "lg"

Breadcrumb size

maxItemsundefined
number

Maximum items before collapsing

itemsBeforeCollapseundefined
number

Items to show before the ellipsis

itemsAfterCollapseundefined
number

Items to show after the ellipsis

BreadcrumbLink

asChildfalse
boolean

Compose with a custom link component (Radix Slot)

hrefundefined
string

Link destination URL

Anatomy

1
2
3
4
Home
6
/
Components
/
5
Breadcrumb
Fonttext-sm
Gapgap-2
Iconicon-xs
1
Root
nav container
2
List
ol list
3
Item
Breadcrumb item
4
Link
Clickable link
5
Current
Current page
6
Separator
Separator character

Best Practices

✓

Do

  • ✓Accurately reflect the site's hierarchy structure
  • ✓Display the current page as the last item
  • ✓Use collapse for long paths
  • ✓Place prominently at the top of the page
✕

Don't

  • ✗Don't make the current page a link — use BreadcrumbPage instead
  • ✗Don't include items unrelated to the site hierarchy
  • ✗Don't use a single-level Breadcrumb — it provides no value
  • ✗Don't use as a replacement for main navigation

Accessibility

Semantic Structure

Breadcrumb is wrapped in a <nav> element — the interior is structured as an ordered list with <ol>. Screen readers correctly announce the navigation hierarchy.

ARIA / WCAG

  • aria-label="breadcrumb" on nav element
  • aria-current="page" on current page
  • aria-hidden="true" on separator
  • WAI-ARIA Breadcrumb Pattern compliant