Breadcrumbs

Navigation

A navigation aid showing the user's location in the site hierarchy. Use breadcrumbs to help users understand where they are and navigate back to parent pages.

Import

import { Breadcrumbs } from "@/components/ui/breadcrumbs";

Usage

Basic Breadcrumbs

Standard breadcrumb navigation

With Home Icon

Breadcrumbs starting with a home link

Deep Hierarchy

Breadcrumbs for deeply nested pages

API Reference

PropTypeDefaultDescription
items*BreadcrumbItem[]Array of breadcrumb items with label and optional href
showHomebooleanfalseWhether to show a home link at the start
homeHrefstring"/"URL for the home link
separatorReactNodeCustom separator element between items

Related Components