TkxBreadcrumb

import { TkxBreadcrumb } from 'tekivex-ui';

Basic

Basic — three levels with current page

<TkxBreadcrumb
  items={[
    { label: 'Home', href: '/' },
    { label: 'Components', href: '/components/' },
    { label: 'Breadcrumb' },
  ]}
/>

The last item (no href) is the current page — rendered as plain text with aria-current="page".

Custom separator

Deep trail (file-system style)

Deep navigation — file-system style

Custom separator

<TkxBreadcrumb
  items={[...]}
  separator="›"
/>

<TkxBreadcrumb
  items={[...]}
  separator={<ChevronIcon />}
/>

Default separator is a small chevron SVG.

With icons

<TkxBreadcrumb
  items={[
    { label: 'Home',  href: '/',           icon: <HomeIcon /> },
    { label: 'Files', href: '/files',      icon: <FolderIcon /> },
    { label: 'README.md',                  icon: <FileIcon /> },
  ]}
/>

Auto-collapse on long trails

<TkxBreadcrumb
  items={veryLongTrail}     // 8+ items
  maxItems={4}              // collapse middle items into an ellipsis
/>
{/* renders: Home / … / Folder / Subfolder / README.md */}

Clicking the ellipsis expands the full trail. Localised aria-label="Show hidden breadcrumb items" on the ellipsis button.

With router integration

import Link from 'next/link';

<TkxBreadcrumb
  items={items}
  renderLink={(props) => <Link href={props.href}>{props.children}</Link>}
/>

The renderLink prop intercepts every linked breadcrumb item, letting you route via your framework’s <Link> component instead of bare <a>.

Accessibility

<nav> element with localised aria-label (e.g. “Breadcrumb” / “ਬ੍ਰੈਡਕ੍ਰਮ”)
<ol> list inside — semantic order matters
Last item: aria-current="page" + plain <span> (not a link)
Separators: aria-hidden="true"
Each item is keyboard-reachable

Props

Prop	Type	Required	Description
`items`	`BreadcrumbItem[]`	yes	`{ label, href?, icon? }`.
`separator`	`ReactNode`		Custom separator.
`maxItems`	`number`		Collapse threshold.
`renderLink`	`(props) => ReactElement`		Router integration.

Source

src/components/TkxBreadcrumb.tsx