Breadcrumb

Installation

›pnpm dlx shadcn@latest add @evolphin/breadcrumb

Usage

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} 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>

Type Definitions

interface BreadcrumbProps {
  /** The separator to use between breadcrumb items */
  ?: .;
}

Examples

Default

Custom Separator

API Reference

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

BreadcrumbList

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

BreadcrumbItem

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

BreadcrumbLink

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child.
`href`	`string`	-	The URL that the link points to.
`className`	`string`	-	Additional CSS classes

BreadcrumbPage

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

BreadcrumbSeparator

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content of the separator.
`className`	`string`	-	Additional CSS classes

BreadcrumbEllipsis

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Search

On this page