[ [UI.20] Navigation ] Breadcrumb

Breadcrumb

> Displays the path to the current resource using a hierarchy of links.

Import

[ [0x5B] IMPORT ]

1import {
2  Breadcrumb,
3  BreadcrumbList,
4  BreadcrumbItem,
5  BreadcrumbLink,
6  BreadcrumbPage,
7  BreadcrumbSeparator,
8} from "@/components/ui/breadcrumb"

Preview

[ [0x00] BREADCRUMB ]

1import {
2  Breadcrumb,
3  BreadcrumbList,
4  BreadcrumbItem,
5  BreadcrumbLink,
6  BreadcrumbPage,
7  BreadcrumbSeparator,
8} from "@/components/ui/breadcrumb";
9
10<Breadcrumb>
11  <BreadcrumbList>
12    <BreadcrumbItem>
13      <BreadcrumbLink href="/">Home</BreadcrumbLink>
14    </BreadcrumbItem>
15    <BreadcrumbSeparator />
16    <BreadcrumbItem>
17      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
18    </BreadcrumbItem>
19    <BreadcrumbSeparator />
20    <BreadcrumbItem>
21      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
22    </BreadcrumbItem>
23  </BreadcrumbList>
24</Breadcrumb>

Variants

[ [0x00] CUSTOM SEPARATOR ]

1import { Slash } from "lucide-react";
2
3<Breadcrumb>
4  <BreadcrumbList>
5    <BreadcrumbItem>
6      <BreadcrumbLink href="/">Home</BreadcrumbLink>
7    </BreadcrumbItem>
8    <BreadcrumbSeparator>
9      <Slash />
10    </BreadcrumbSeparator>
11    <BreadcrumbItem>
12      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
13    </BreadcrumbItem>
14    <BreadcrumbSeparator>
15      <Slash />
16    </BreadcrumbSeparator>
17    <BreadcrumbItem>
18      <BreadcrumbPage>Components</BreadcrumbPage>
19    </BreadcrumbItem>
20  </BreadcrumbList>
21</Breadcrumb>

[ [0x00] WITH ELLIPSIS ]

1import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb";
2
3<Breadcrumb>
4  <BreadcrumbList>
5    <BreadcrumbItem>
6      <BreadcrumbLink href="/">Home</BreadcrumbLink>
7    </BreadcrumbItem>
8    <BreadcrumbSeparator />
9    <BreadcrumbItem>
10      <BreadcrumbEllipsis />
11    </BreadcrumbItem>
12    <BreadcrumbSeparator />
13    <BreadcrumbItem>
14      <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
15    </BreadcrumbItem>
16    <BreadcrumbSeparator />
17    <BreadcrumbItem>
18      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
19    </BreadcrumbItem>
20  </BreadcrumbList>
21</Breadcrumb>

[ [0x00] WITH DROPDOWN ]

1import {
2  DropdownMenu,
3  DropdownMenuContent,
4  DropdownMenuItem,
5  DropdownMenuTrigger,
6} from "@/components/ui/dropdown-menu";
7
8<Breadcrumb>
9  <BreadcrumbList>
10    <BreadcrumbItem>
11      <BreadcrumbLink href="/">Home</BreadcrumbLink>
12    </BreadcrumbItem>
13    <BreadcrumbSeparator />
14    <BreadcrumbItem>
15      <DropdownMenu>
16        <DropdownMenuTrigger className="flex items-center gap-1">
17          <BreadcrumbEllipsis className="h-4 w-4" />
18        </DropdownMenuTrigger>
19        <DropdownMenuContent align="start">
20          <DropdownMenuItem className="font-semibold">
21            Documentation
22          </DropdownMenuItem>
23          <DropdownMenuItem className="font-semibold">
24            Guides
25          </DropdownMenuItem>
26          <DropdownMenuItem className="font-semibold">
27            Components
28          </DropdownMenuItem>
29        </DropdownMenuContent>
30      </DropdownMenu>
31    </BreadcrumbItem>
32    <BreadcrumbSeparator />
33    <BreadcrumbItem>
34      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
35    </BreadcrumbItem>
36  </BreadcrumbList>
37</Breadcrumb>

[ [0x00] WITH NEXT.JS LINK ]

1import Link from "next/link";
2
3<Breadcrumb>
4  <BreadcrumbList>
5    <BreadcrumbItem>
6      <BreadcrumbLink asChild>
7        <Link href="/">Home</Link>
8      </BreadcrumbLink>
9    </BreadcrumbItem>
10    <BreadcrumbSeparator />
11    <BreadcrumbItem>
12      <BreadcrumbLink asChild>
13        <Link href="/docs">Documentation</Link>
14      </BreadcrumbLink>
15    </BreadcrumbItem>
16    <BreadcrumbSeparator />
17    <BreadcrumbItem>
18      <BreadcrumbPage>Current Page</BreadcrumbPage>
19    </BreadcrumbItem>
20  </BreadcrumbList>
21</Breadcrumb>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
separator	`React.ReactNode`	-	Custom separator to use between breadcrumb items on the Breadcrumb root
asChild	`boolean`	`false`	For BreadcrumbLink - when true, merges props into the child element (useful for Next.js Link)

Accessibility

[ [0x58] A11Y ]

Uses semantic nav element with aria-label='breadcrumb'
Current page is marked with aria-current='page'
BreadcrumbPage uses role='link' with aria-disabled='true'
Separators are hidden from screen readers with aria-hidden='true'
Provides clear navigation hierarchy for screen reader users

When to Use

[ [0xE9] USAGE GUIDANCE ]

✓ Use Breadcrumb when:

• Deep navigation hierarchy with 3+ levels (Home > Products > Category > Item)
• User needs context of their current location within the site structure
• Secondary navigation aid complementing primary nav (not replacing it)
• Content is logically nested (categories, folders, documentation sections)
• User may want to navigate back up the hierarchy without browser back button

✗ Don't use when:

• Flat site structure with less than 3 levels deep
• Primary navigation method (use Navigation component instead)
• Only one level deep (use back button or skip breadcrumb)
• Mobile with limited horizontal space (consider back button only)
• Linear process or wizard (use multi-step form instead)

Best Practices:

• Keep labels short and scannable (1-2 words max per item)
• Always show current page (non-clickable) as final item
• Limit visible items to 5-7; use ellipsis + dropdown for longer paths
• First item is typically "Home" or root-level category
• Use BreadcrumbEllipsis for collapsed middle items, not start/end
• Separators should be subtle (/, >, or custom icon)
• Consider hiding on mobile if space constrained (< 768px)

Preview

[ [0x00] BREADCRUMB ]

1import {
2  Breadcrumb,
3  BreadcrumbList,
4  BreadcrumbItem,
5  BreadcrumbLink,
6  BreadcrumbPage,
7  BreadcrumbSeparator,
8} from "@/components/ui/breadcrumb";
9
10<Breadcrumb>
11  <BreadcrumbList>
12    <BreadcrumbItem>
13      <BreadcrumbLink href="/">Home</BreadcrumbLink>
14    </BreadcrumbItem>
15    <BreadcrumbSeparator />
16    <BreadcrumbItem>
17      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
18    </BreadcrumbItem>
19    <BreadcrumbSeparator />
20    <BreadcrumbItem>
21      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
22    </BreadcrumbItem>
23  </BreadcrumbList>
24</Breadcrumb>

Variants

[ [0x00] CUSTOM SEPARATOR ]

1import { Slash } from "lucide-react";
2
3<Breadcrumb>
4  <BreadcrumbList>
5    <BreadcrumbItem>
6      <BreadcrumbLink href="/">Home</BreadcrumbLink>
7    </BreadcrumbItem>
8    <BreadcrumbSeparator>
9      <Slash />
10    </BreadcrumbSeparator>
11    <BreadcrumbItem>
12      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
13    </BreadcrumbItem>
14    <BreadcrumbSeparator>
15      <Slash />
16    </BreadcrumbSeparator>
17    <BreadcrumbItem>
18      <BreadcrumbPage>Components</BreadcrumbPage>
19    </BreadcrumbItem>
20  </BreadcrumbList>
21</Breadcrumb>

[ [0x00] WITH ELLIPSIS ]

1import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb";
2
3<Breadcrumb>
4  <BreadcrumbList>
5    <BreadcrumbItem>
6      <BreadcrumbLink href="/">Home</BreadcrumbLink>
7    </BreadcrumbItem>
8    <BreadcrumbSeparator />
9    <BreadcrumbItem>
10      <BreadcrumbEllipsis />
11    </BreadcrumbItem>
12    <BreadcrumbSeparator />
13    <BreadcrumbItem>
14      <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
15    </BreadcrumbItem>
16    <BreadcrumbSeparator />
17    <BreadcrumbItem>
18      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
19    </BreadcrumbItem>
20  </BreadcrumbList>
21</Breadcrumb>

[ [0x00] WITH DROPDOWN ]

1import {
2  DropdownMenu,
3  DropdownMenuContent,
4  DropdownMenuItem,
5  DropdownMenuTrigger,
6} from "@/components/ui/dropdown-menu";
7
8<Breadcrumb>
9  <BreadcrumbList>
10    <BreadcrumbItem>
11      <BreadcrumbLink href="/">Home</BreadcrumbLink>
12    </BreadcrumbItem>
13    <BreadcrumbSeparator />
14    <BreadcrumbItem>
15      <DropdownMenu>
16        <DropdownMenuTrigger className="flex items-center gap-1">
17          <BreadcrumbEllipsis className="h-4 w-4" />
18        </DropdownMenuTrigger>
19        <DropdownMenuContent align="start">
20          <DropdownMenuItem className="font-semibold">
21            Documentation
22          </DropdownMenuItem>
23          <DropdownMenuItem className="font-semibold">
24            Guides
25          </DropdownMenuItem>
26          <DropdownMenuItem className="font-semibold">
27            Components
28          </DropdownMenuItem>
29        </DropdownMenuContent>
30      </DropdownMenu>
31    </BreadcrumbItem>
32    <BreadcrumbSeparator />
33    <BreadcrumbItem>
34      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
35    </BreadcrumbItem>
36  </BreadcrumbList>
37</Breadcrumb>

[ [0x00] WITH NEXT.JS LINK ]

1import Link from "next/link";
2
3<Breadcrumb>
4  <BreadcrumbList>
5    <BreadcrumbItem>
6      <BreadcrumbLink asChild>
7        <Link href="/">Home</Link>
8      </BreadcrumbLink>
9    </BreadcrumbItem>
10    <BreadcrumbSeparator />
11    <BreadcrumbItem>
12      <BreadcrumbLink asChild>
13        <Link href="/docs">Documentation</Link>
14      </BreadcrumbLink>
15    </BreadcrumbItem>
16    <BreadcrumbSeparator />
17    <BreadcrumbItem>
18      <BreadcrumbPage>Current Page</BreadcrumbPage>
19    </BreadcrumbItem>
20  </BreadcrumbList>
21</Breadcrumb>

Prop

Type

Default

Description

separator

React.ReactNode

Custom separator to use between breadcrumb items on the Breadcrumb root

asChild

boolean

false

For BreadcrumbLink - when true, merges props into the child element (useful for Next.js Link)