Breadcrumb

Preview

Installation

npx skeci-ui add breadcrumb

Usage

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from '@/components/ui/breadcrumb';

<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

With Ellipsis

Custom Separator

Props

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Whether to merge props onto the child element.

BreadcrumbItem

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Whether to merge props onto the child element.

BreadcrumbLink

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Whether to merge props onto the child element.
`href`	`string`	—	The URL to link to.