Breadcrumb

Displays the path to the current resource using a hierarchy of links.

separator

default (chevron)

slash (/)

ellipsis

#Installation

bunx --bun barefoot add breadcrumb

#Usage

1import {2  Breadcrumb,3  BreadcrumbList,4  BreadcrumbItem,5  BreadcrumbLink,6  BreadcrumbPage,7  BreadcrumbSeparator,8  BreadcrumbEllipsis,9} from '@/components/ui/breadcrumb'

#Examples

#Basic

1import {2  Breadcrumb,3  BreadcrumbList,4  BreadcrumbItem,5  BreadcrumbLink,6  BreadcrumbPage,7  BreadcrumbSeparator,8} from '@/components/ui/breadcrumb'910function BreadcrumbBasic() {11  return (12    <Breadcrumb>13      <BreadcrumbList>14        <BreadcrumbItem>15          <BreadcrumbLink href="#">Home</BreadcrumbLink>16        </BreadcrumbItem>17        <BreadcrumbSeparator />18        <BreadcrumbItem>19          <BreadcrumbLink href="#">Documents</BreadcrumbLink>20        </BreadcrumbItem>21        <BreadcrumbSeparator />22        <BreadcrumbItem>23          <BreadcrumbPage>Current Document</BreadcrumbPage>24        </BreadcrumbItem>25      </BreadcrumbList>26    </Breadcrumb>27  )28}

#Ellipsis

1import {2  Breadcrumb,3  BreadcrumbList,4  BreadcrumbItem,5  BreadcrumbLink,6  BreadcrumbPage,7  BreadcrumbSeparator,8  BreadcrumbEllipsis,9} from '@/components/ui/breadcrumb'1011function BreadcrumbWithEllipsis() {12  return (13    <Breadcrumb>14      <BreadcrumbList>15        <BreadcrumbItem>16          <BreadcrumbLink href="#">Home</BreadcrumbLink>17        </BreadcrumbItem>18        <BreadcrumbSeparator />19        <BreadcrumbItem>20          <BreadcrumbEllipsis />21        </BreadcrumbItem>22        <BreadcrumbSeparator />23        <BreadcrumbItem>24          <BreadcrumbLink href="#">Components</BreadcrumbLink>25        </BreadcrumbItem>26        <BreadcrumbSeparator />27        <BreadcrumbItem>28          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>29        </BreadcrumbItem>30      </BreadcrumbList>31    </Breadcrumb>32  )33}

#Custom Separator

1import {2  Breadcrumb,3  BreadcrumbList,4  BreadcrumbItem,5  BreadcrumbLink,6  BreadcrumbPage,7  BreadcrumbSeparator,8} from '@/components/ui/breadcrumb'910function BreadcrumbCustomSeparator() {11  return (12    <Breadcrumb>13      <BreadcrumbList>14        <BreadcrumbItem>15          <BreadcrumbLink href="#">Home</BreadcrumbLink>16        </BreadcrumbItem>17        <BreadcrumbSeparator>/</BreadcrumbSeparator>18        <BreadcrumbItem>19          <BreadcrumbLink href="#">Components</BreadcrumbLink>20        </BreadcrumbItem>21        <BreadcrumbSeparator>/</BreadcrumbSeparator>22        <BreadcrumbItem>23          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>24        </BreadcrumbItem>25      </BreadcrumbList>26    </Breadcrumb>27  )28}

#API Reference

Breadcrumb

Prop	Type	Default	Description
children	ReactNode	-	The breadcrumb content (typically BreadcrumbList).
className	string	-	Additional CSS classes.

BreadcrumbList

Prop	Type	Default	Description
children	ReactNode	-	The list items (BreadcrumbItem, BreadcrumbSeparator).

BreadcrumbItem

Prop	Type	Default	Description
children	ReactNode	-	The item content (BreadcrumbLink or BreadcrumbPage).

BreadcrumbLink

Prop	Type	Default	Description
href	string	-	The URL for the link.
asChild	boolean	false	Render child element with link styling instead of <a>.
children	ReactNode	-	The link text.

BreadcrumbPage

Prop	Type	Default	Description
children	ReactNode	-	The current page text.

BreadcrumbSeparator

Prop	Type	Default	Description
children	ReactNode	-	Custom separator content. Defaults to ChevronRightIcon.