Navigation

Breadcrumb

Compound component: `Breadcrumb`, `Breadcrumb.Item`, `Breadcrumb.Separator`.

Server safeSource

Import

import { Breadcrumb } from '@the_viveksingh/vivek-ui'

From data

A nav with an ordered list. The current page gets aria-current="page" and is not a link, because linking to where you already are is a dead end.

<Breadcrumb
  items={[
    { label: 'Docs', href: '/docs' },
    { label: 'Components', href: '/docs/components' },
    { label: 'Breadcrumb', current: true },
  ]}
/>

Or as children

Use the compound form when an item needs a router link - Breadcrumb.Item takes asChild.

<Breadcrumb>
  <Breadcrumb.Item asChild>
    <Link href="/docs">Docs</Link>
  </Breadcrumb.Item>
  <Breadcrumb.Item href="/docs/components">Components</Breadcrumb.Item>
  <Breadcrumb.Item current>Breadcrumb</Breadcrumb.Item>
</Breadcrumb>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Breadcrumb
Prop	Type	Default	Description
`items`	`BreadcrumbItemData[]`	—	Data-driven trail. Rendered in order, and the last entry becomes the current page automatically. Ignored when `children` are given.
`separator`	`ReactNode`	—	Divider between items. A chevron by default; always decorative.
`size`	`'sm' \| 'md'`	—	—
`label`	`string`	—	Accessible name for the `nav`. Defaults to `"Breadcrumb"`.
`children`	`ReactNode`	—	Compound form — `Breadcrumb.Item` and `Breadcrumb.Separator`. Wins over `items`.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Breadcrumb carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.