BREADCRUMB

Navigation breadcrumb trail showing current location hierarchy.

PREVIEW

INSTALLATION

BASH

npx shadcn@latest add @scificn/breadcrumb

USAGE

TSX

import {
  Breadcrumb, BreadcrumbList, BreadcrumbItem,
  BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator
} from '@scificn/ui'

export function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem><BreadcrumbLink href="/">HOME</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem><BreadcrumbPage>CURRENT</BreadcrumbPage></BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
Breadcrumb	nav element	—	Root nav wrapper with aria-label="breadcrumb".
BreadcrumbList	ol element	—	Ordered list of breadcrumb items.
BreadcrumbItem	li element	—	Individual breadcrumb entry.
BreadcrumbLink	a element	—	Clickable breadcrumb link.
BreadcrumbPage	span element	—	Current page indicator (non-clickable).
BreadcrumbSeparator	li element	">"	Separator between items. Children override the default ">" symbol.