> ## Documentation Index > Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt > Use this file to discover all available pages before exploring further. # Breadcrumb > A navigation aid that shows the user's current location within a hierarchical structure — supporting icons, custom separators, and collapsed states. ## 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 ```bash npm theme={null} npm install @araf-ds/core ``` ```bash yarn theme={null} yarn add @araf-ds/core ``` ```bash pnpm theme={null} pnpm add @araf-ds/core ``` *** ## Usage ```tsx theme={null} import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbList, } from "@araf-ds/core" export default function Example() { return ( Home Components Breadcrumb ) } ``` *** ## Variants ### Default
```tsx theme={null} Home Settings Profile ``` ### With Icons
```tsx theme={null} Home Users Edit Profile ``` ### Collapsed (with Ellipsis) Use `BreadcrumbEllipsis` when the path is too long to display in full.
```tsx theme={null} Home Projects Alpha ``` ### Custom Separator
```tsx theme={null} Home / Docs / Components ``` *** ## API Reference ### Breadcrumb Custom separator element. Defaults to `ChevronRight` icon. Additional class names for the `