Breadcrumb

A navigational aid that helps users understand their current location within a website's hierarchy.

This component features four distinct visual variants, seamless color theming, and built-in automatic path truncation. If the user's path is too deep, it automatically collapses the middle items behind a clickable ellipsis (...) button.

You describe the trail as an items array; the component handles dividers, the active item and truncation.

Passitems: as an array of { label, href } — the last entry is treated as the current page and is not linked.
color: themes the active text and hover states — a named key or a hex string such as #00FF00.
linkComponent: swaps the plain a each item renders for your router's link — pass Link from next/link to keep client-side navigation and prefetching.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

npx shadcn@latest add @algorize-ui/breadcrumb

components/custom/blocks/BreadcrumbBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Nothing beyond the shared setup — Breadcrumb needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

With icons

Give an item anicon: — the Lucide component itself, not its name — to label it visually beside the text.

Truncated path

maxItems{4}: is the default — past that many links the middle collapses behind a ... the reader can click to expand.

Features

Explore the Breadcrumb navigation features, including collapsible items, custom separators, and SEO-friendly structure.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Prop	Type	Default	Description
`items`	`BreadcrumbItem[]`	Required	An array of objects containing a `label` (string), optional `href` (string), and optional `icon` (Lucide Component).
`variant`	`"classic" \| "slash" \| "solid" \| "ghost"`	`"classic"`	Determines the visual styling of the links and the dividers between them.
`color`	`"indigo" \| "rose" \| "emerald" \| "zinc" \| string`	`"indigo"`	Applies global color themes to the active text and hover states. Accepts valid hex codes (e.g. `"#00FF00"`).
`maxItems`	`number`	`4`	The maximum number of links to display before automatically truncating the middle of the path.
`linkComponent`	`React.ElementType`	`"a"`	The element each item renders as. It defaults to a plain `<a>` so one source works in any React app — pass `Link` from `next/link` to get client-side navigation and prefetching back.