BreadcrumbNav

Smart breadcrumb with dropdown for middle items when path is long, using ChevronRight separator and Home icon.

Navigation & Layoutbreadcrumbnavigationpath

Dependencies

shadcn/ui components needed:

npx shadcn@latest add breadcrumbnpx shadcn@latest add dropdown-menunpx shadcn@latest add button

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Home, ChevronRight, MoreHorizontal } from 'lucide-react';
4import { Button } from '@/components/ui/button';
5import {
6  Breadcrumb,
7  BreadcrumbItem,
8  BreadcrumbLink,
9  BreadcrumbList,
10  BreadcrumbPage,
11  BreadcrumbSeparator,
12} from '@/components/ui/breadcrumb';
13import {
14  DropdownMenu,
15  DropdownMenuContent,
16  DropdownMenuItem,
17  DropdownMenuTrigger,
18} from '@/components/ui/dropdown-menu';
19
20export default function BreadcrumbNav() {
21  return (
22    <div className="flex items-center justify-center p-8 bg-white dark:bg-slate-950 min-h-[200px]">
23      <Breadcrumb>
24        <BreadcrumbList>
25          <BreadcrumbItem>
26            <BreadcrumbLink href="#" className="flex items-center gap-1 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white">
27              <Home className="w-4 h-4" />
28              <span>Home</span>
29            </BreadcrumbLink>
30          </BreadcrumbItem>
31          <BreadcrumbSeparator>
32            <ChevronRight className="w-4 h-4 text-slate-400" />
33          </BreadcrumbSeparator>
34          <BreadcrumbItem>
35            <DropdownMenu>
36              <DropdownMenuTrigger className="flex items-center gap-1 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white">
37                <MoreHorizontal className="w-4 h-4" />
38              </DropdownMenuTrigger>
39              <DropdownMenuContent align="start">
40                <DropdownMenuItem>Products</DropdownMenuItem>
41                <DropdownMenuItem>Categories</DropdownMenuItem>
42                <DropdownMenuItem>Documentation</DropdownMenuItem>
43              </DropdownMenuContent>
44            </DropdownMenu>
45          </BreadcrumbItem>
46          <BreadcrumbSeparator>
47            <ChevronRight className="w-4 h-4 text-slate-400" />
48          </BreadcrumbSeparator>
49          <BreadcrumbItem>
50            <BreadcrumbLink href="#" className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white">
51              Components
52            </BreadcrumbLink>
53          </BreadcrumbItem>
54          <BreadcrumbSeparator>
55            <ChevronRight className="w-4 h-4 text-slate-400" />
56          </BreadcrumbSeparator>
57          <BreadcrumbItem>
58            <BreadcrumbPage className="font-semibold text-slate-900 dark:text-white">Navigation</BreadcrumbPage>
59          </BreadcrumbItem>
60        </BreadcrumbList>
61      </Breadcrumb>
62    </div>
63  );
64}