Back to Components
New

Breadcrumb

Displays the hierarchical path to the current resource with links to navigate to higher levels.

navigation
hierarchy
path
links

Preview

Code

TSX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import {
      Breadcrumb,
      BreadcrumbItem,
      BreadcrumbLink,
      BreadcrumbList,
      BreadcrumbPage,
      BreadcrumbSeparator,
    } from "@/components/ui/breadcrumb"
    import { HomeIcon } from "lucide-react"

    export function BreadcrumbDemo() {
      return (
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="#">
                <HomeIcon className="h-4 w-4 mr-1" />
                Home
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Components</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      )
    }

API Reference

PropTypeDefaultDescription
separatorReact.ReactNode-Custom separator between breadcrumb items.
asChildbooleanfalseWhen true, BreadcrumbLink will forward props to its child element.
View Full Documentation