HomeAboutCodes

IntroductionCSS FlexboxCSS Grid Layout

AccordionAspect RatioBadgeBreadcrumbButtonCarouselCheckboxDate PickerDialogDrawerFormHover CardPaginationPopoverSheetSkeletonSonnerSwitchTableTooltip

Background FireworksBackground HexagonBackground HoleBackground StartElement SpringLoadingProgress ScrollText HighlightText RollingText ShimmeringText SplittingText Typing

Sortable

useClickOutsideuseCopyToClipboarduseDebounceuseFetchuseIsClientuseLocalStorageuseMediaQueryusePrevioususeToggleuseUnmount

Preview

  1. Home
  2. More
  3. Components
  4. Breadcrumb

Import

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

Usage

1<Breadcrumb>
2  <BreadcrumbList>
3    <BreadcrumbItem>
4      <BreadcrumbLink asChild>
5        <span>Home</span>
6      </BreadcrumbLink>
7    </BreadcrumbItem>
8    <BreadcrumbSeparator />
9    <BreadcrumbItem>
10      <BreadcrumbEllipsis className="size-4" />
11    </BreadcrumbItem>
12    <BreadcrumbSeparator />
13    <BreadcrumbItem>
14      <BreadcrumbLink asChild>
15        <span>Components</span>
16      </BreadcrumbLink>
17    </BreadcrumbItem>
18    <BreadcrumbSeparator />
19    <BreadcrumbItem>
20      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
21    </BreadcrumbItem>
22  </BreadcrumbList>
23</Breadcrumb>
BadgeButton