Skip to main content

​
Overview

Breadcrumb shows the user’s current page location within a hierarchy, allowing navigation back to any parent level. It is purely navigational — each item except the last should be a link.

​
Installation

npm install @araf-ds/core

​
Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbList,
} from "@araf-ds/core"

export default function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

​
Variants

​
Default

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/settings">Settings</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Profile</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

​
With Icons

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">
        <HomeIcon size={14} /> Home
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/users">
        <UsersIcon size={14} /> Users
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>
        <EditIcon size={14} /> Edit Profile
      </BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

​
Collapsed (with Ellipsis)

Use BreadcrumbEllipsis when the path is too long to display in full. 
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/projects">Projects</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Alpha</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

​
Custom Separator

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>/</BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>/</BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbPage>Components</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

​
API Reference

​
separator
ReactNode
Custom separator element. Defaults to ChevronRight icon.
​
className
string
Additional class names for the <nav> element.
​
href
string
required
Navigation URL for the breadcrumb link.
​
asChild
boolean
default:"false"
Render as a child element (e.g. Next.js <Link>).
Marks the current page — renders as non-link text with aria-current="page".
​
children
ReactNode
Custom separator content. Defaults to a ChevronRight icon.
Renders a ··· button indicating hidden middle items. Typically wrapped in a DropdownMenu for expanded navigation.

​
Accessibility

  • The wrapping <nav> has aria-label="breadcrumb" by default
  • The last item uses aria-current="page" via BreadcrumbPage
  • Separator elements use aria-hidden="true" — they are purely decorative
  • All link items are keyboard focusable and support Enter navigation
  • BreadcrumbEllipsis should open a dropdown showing the hidden items for full keyboard access

​
Do’s & Don’ts

Do

  • Always make every item except the last a clickable link
  • Use BreadcrumbEllipsis when there are more than 4 levels deep
  • Reflect the actual URL hierarchy in breadcrumb items
  • Keep breadcrumb labels short — match the page title

Don't

  • Don’t use breadcrumb for flat navigation — it’s for hierarchical paths only
  • Don’t include the site root (“Home”) if the path is already obvious
  • Don’t make the current page (last item) a link — it’s already active
  • Don’t truncate labels mid-word — use ellipsis only at the item level